How do I access theme when using css-backticks notation?

[pauljfx]

I know that when you use styled you can access theme like this:

export const Element = styled.div`
  color: ${props => props.theme.color.text};
`;

or when you use css property - like this:

<div css={theme => ({ color: theme.colors.primary })}>
  some other text
</div>

But how do I access theme when I use css function backticks style and the class name generated by it?

export const myStyle = css`
  color: red;
`;

<div className={myStyle}>My Text</div>

[carlos-dubon]

You can use the useTheme hook.

/** @jsx jsx */
import { jsx, ThemeProvider, useTheme } from '@emotion/react'

const theme = {
  colors: {
    primary: 'hotpink'
  }
}

function SomeText (props) {
  const theme = useTheme()
  return (
    <div
      css={{ color: theme.colors.primary }}
      {...props}
    />
  )
}

render(
  <ThemeProvider theme={theme}>
    <SomeText>some text</SomeText>
  </ThemeProvider>
)

[pauljfx]

Sorry, @carlos-dubon, I do not follow how is this an answer if you do not even have a backtick (`) in your example... the question was - how do I access theme in the style block written this way:

export const myStyle = css`
  color: red;
`;

[carlos-dubon]

Just use the backticks alongside the useTheme hook.. the above example is extracted from the docs and it shows how to use the useTheme hook and how to get the theme properties.

[pauljfx]

Thanks @carlos-dubon for the clarification, now I see what you're saying but I think now I need to explain why I've asked this question on the first place.

I wan to use back-ticks because:

• It allow to write very short code, shorter than other examples
• The tag name I am applying the style to does not change (<div className={style} /> vs <SomeText />). I prefer it this way because every time I see <Header> or <Card> component in someone else's code I need to click into component and see if that's a real component or just a style, and even if just a style - what actual HTML tag is used for that... all that is confusing and name conventions like <StyledDiv/> etc. make it even uglier.... so good old <div className={style} /> works for me the best.

The example you're providing is longer even than "styled" example and does not allow me to preserve the original html tag name

export const Element = styled.div`
  color: ${props => props.theme.color.text};
`;

So I guess, the real answer to my question, sadly, is "You can't do that".

[carlos-dubon]

@pauljfx

This is as clean as I could get it:

MyComponent.jsx

/** @jsx jsx */
import { jsx, useTheme, css } from '@emotion/react';

const MyComponent = () => {

  const theme = useTheme();  

  const myStyles = css`
    color: ${theme.colors.primary}
  `;

  return(
    <>
      <div css={myStyles}>I am a div tag</div>
      <p css={myStyles}>I am a paragraph tag</p>
      <h2 css={css`color: ${theme.colors.primary}`}>I am a Heading 2 tag</h2>
    </>
  )
}

export default MyComponent;

In react there is a point where you need to have a parent component, in this case it's the MyComponent component.

Hooks can only be called before the return statement of a Functional Component. So it´s impossible to call the useTheme hook inside the return statement.

This is why the above code can't get any "cleaner".

The css`` syntax is just a template literal with syntax highlighting provided by the styled-components extension. There is no way a string has "inner variables" to access. This is why you need to get the theme from some context which the useTheme hook does for you.

I hope this helps!

[pauljfx]

Thank you, I guess this is as good as it gets :)

[pauljfx]

One note though for those who find this in google and decide to use - you probably want to wrap css into useMemo or something.