@emotion/react: Support using theme props with `css` API

The problem

Existing css from @emotion/react doesn’t support accessing theme props as such:

const mixin = css`
  color: ${props => props.theme.colors.primary}

Proposed solution

Please support it as it is helpful for React developers:

  • Allow use cases in theme definitions, mixins, helpers, etc. where accessing theme props is required
  • Users migrating to Emotion from Styled Components will be blocked by the lack of this feature

No specific solution from me but styled-components is a good example.

Alternative solutions


Additional context

Similar issue: #801

2 thoughts on “@emotion/react: Support using theme props with `css` API

  1. I see a few other options as temporary workarounds:

    • The useTheme can be used inside a component.
    • Just import the theme object and use it raw in the mixin. The only difference (as far as I see) is the lack of reactivity, which can be solved by hooking the component up to the useTheme hook.