Emotion: Is there no way to use themes with the `css` helper?

[acnebs]

Basically, I want to be able to theme components from a 3rd party UI library (antd), but am struggling to find a way to get it working.

I actually switched to emotion from styled-components because I assumed (without reading the docs) that there would be a good way to use css`` in conjunction with themes, but that appears to not be the case as far as I can tell.

And no, I cannot just wrap the component in a styled(), as these components are relying on other markup that is not a subset of the component itself.

Is there any way to achieve what I want with emotion? Or any other thoughts/tips?

[Andarist]

And no, I cannot just wrap the component in a styled(), as these components are relying on other markup that is not a subset of the component itself.

Could u explain this?

css is completely react-agnostic, therefore it has no knowledge about react, context, props etc. It's just a function 😉 You may find this useful though.

You can also always do this:

const getCls = theme => css`color: ${theme.color}`

function Box(props) {
  return (
    <div
      className={getCls(props.theme)}
    />
  );
}

export default withTheme(Box)

[acnebs]

Well effectively I am trying to style antd notifications, but they are not JSX components, they are just function calls. I was having trouble visualizing how I could pass the theme to an element that is not wrapped in a JSX call at any point (but accepts a className prop).

But your code example pointed me in the right direction, just needed to pass my theme object around a couple times and have it as a function rather than an object! Thanks for the help.

For anyone else: if you're using Redux or a similar state container, you can store your active theme object in there, pass that to the <ThemeProvider />, and if you need the theme anywhere outside of your JSX you can hopefully pull it from your store and pass it to a function like the one above.

[nykaa-shristi]

I am trying to use theming but its not working

const btn = theme => css`
background-color: ${theme.brandColor.B1};
height: 50px;

const Container = (props) => {

const theme = useTheme();
return (
className={width-full ${cx(btn)}}>
done

)
`

its not working