Converted to v11 and emotion-theme -> emotion/react breaks theme references

[lucksp]

We are converting our codebase to TypeScript. Therefore our style files which reference props.theme.color.black has compiler issues because our theme.color.red is not defined. I decided to upgrade to v11 from 10 following the guide in Emotion.

Original Files:

• // theme.js

export const theme = {
  colors: {
    black: '#2D333A',
    white: '#FFFFFF',
  },
};

• Above is converted to theme.ts and export const theme: Theme = { is the only change in this file.

• providers.js wraps our app:

const AppProviders = ({ children }) => {
  return (
      <MuiThemeProvider theme={muiTheme}>
        <ThemeProvider theme={theme}> // EMOTION THEMEPROVIDER
          <StylesProvider injectFirst>
            <CacheProvider value={cache}>
              <CssBaseline />
              {children}
            </CacheProvider>
          </StylesProvider>
        </ThemeProvider>
      </MuiThemeProvider>
  );
};

• existing StyledComponent example (JS file):

export const StyledPillButton = styled(props => <PillButton {...props} />)(
  (props) => ({
    backgroundColor: props.theme.colors.white,
    borderRadius: '24px',
    color: theme.colors.black,
  })
);

Updated Files:

• Added a new definition file as recommended in docs
• Ran the codeMod as described in docs.
• App fails because:
  • props.theme.colors.black has theme as an empty object still
    
  • elements using theme from useTheme fail.

---

After trying to debug this 2 thing stands out:

1. <ThemeProvider /> was from 'emotion-theming'. The codeMod changed it to @emotion/react
2. useTheme references was from 'emotion-theming'. The codeMod changed it to @emotion/react

I tried overriding the codemod to put back use of emotion-theming and all is good now: props.theme is no longer empty and useTheme's theme is no longer empty.

Questions: Why are the codemods from emotion-theming -> @emotion/react breaking my theme references? The update from V10 > V11 with Typescript should be pretty straightforward swap, yes?

[Andarist]

If you are providing your theme using emotion-theming and your styled components can pick it up then you are using v10 of @emotion/styled package. There is no way around it - I mean, it has to be the culprit.

[lucksp]

I am pretty sure I was not on v10...

i removed the @emotion/core, upgraded packages to v11, and ran the codemod to convert the emotion-theming -> @emotion/react imports.

It felt like i was on v11

[Andarist]

Hard to tell more if you don't share a repro case - emotion-theming package doesn't exist in v11 so there is just no way that it fixed the v11-only problem.

[lucksp]

hmmm...very interesting...i would have though the import of ThemeProvider & useTheme from @emotion/react would direct it to V11

We'll dig in some more. If we still run into roadblocks, i will try to get a repro sandbox

[Andarist]

hmmm...very interesting...i would have though the import of ThemeProvider & useTheme from @emotion/react would direct it to V11

Yes, those would definitely resolve to v11. I'm saying kinda the opposite thing - that if using emotion-theming has helped you anyhow then your @emotion/styled had to be resolved to v10 since emotion-theming doesn't exist in v11

[lucksp]

any ideas what could cause the theme to remain an empty obj? This has happened once removeing emotion-theming and replaced the ThemeProvider to come from v11, @emtion/react...We no longer have v10 referenced.

I thought it could be the Button from Material UI mutating it, but it doesn't seem likely. If I check the theme in the component rendering the StyledButton, const theme = useTheme(), the theme looks OK. So it gets reset at some point between invoking the component and the styled component consuming it:

const Component = () => {
  const theme = useTheme();
  console.log({theme}) // returns theme OK

  return <StyledPillButton />
}

and

export const StyledPillButton = styled((props) => <Button {...props} />)( // where Button is Material UI
  (props) => {. // props.theme is now {}
    return {
      backgroundColor: props.theme.colors.white,
      borderRadius: "24px",
      border: `1px solid ${props.theme.colors.error}`,
      color: props.theme.colors.error,
      fontSize: "12px",
      height: 48,
      textAlign: "right"
    };
  }
);

I have been trying to reproduce in a codesandbox, but with a full production/private company app, it's hard to replicate all conditions.

[Andarist]

I've seen dozens of similar reports in the past and the answer was always the same - v10 (or multiple copies of Emotion) is somehow sneaking into your app. Not a single issue was about something else.

It's hard to give any more guidance/tips about this problem as long as I don't get more information about it (preferably a repro case)

[tlebon]

just to throw in here, i had a similar issue and it was solved by removing my local emotion and just keeping the one that is being consumed by my component library package