ThemeProvider not passing theme object to imported child component

[tbrasington]

Hi

This maybe a quirk of the setup I have running with how I bundle the component package. Hoping somewhere here has a better idea than I do!

Environment

• I am importing component package bundled with microbundle
• Example app running zeit/next.js (also tried with create-react-app)
• theme-ui for styling

Example Code

<ThemeProvider theme={theme}>
  <Button text="foo" />
  <SomeOtherComponent>
</ThemeProvider>

Error Message related to the component

Warning: Prop `className` did not match. Server: "css-0" Client: "css-10audxd-Button"

Button is the component from the package that isn't receiving the theme object.
SomeOtherComponent is a relative component that gets the theme object.

For reference, this is the Button component

/** @jsx jsx */
import { jsx } from 'theme-ui'
// Component
export const Button = ({
  text,
  children,
  kind,
}) => {
  return (
    <button sx={{ variant: `buttons.${kind}` }}>
      {text || children}
    </button>
  )
}

Button.defaultProps = {
  kind: "primary"
};

Other notes

• Button renders the theme correctly in its relative package via parcel
• Button renders correctly in the same import setup with Framer X

Any help is appreciated!

[Marujah]

hi, why is this closed? I sitll have the same issue

[lachlanjc]

hi, why is this closed? I sitll have the same issue

Hey! You're most likely encountering mismatched Emotion versions. See here: #1531 @Marujah