How get theme value inside the component?

[adambisek]

Hello there,
please, I have a specific case, where I need to get theme value inside component, like this:

const Component = (props) => {
   const primaryColor = th.color(”primary”, props)
...

But this doesnt work, because th helper is intended to be used inside styled-components.

I note that this component is under xstyled context provider.

How to do this?

[mintyfloss]

I've done this by using useTheme.

import {useTheme} from '@xstyled/styled-components';

const Component = () => {
  const theme = useTheme();
  const primaryColor = theme.primary;

[gregberge]

Yeah useTheme is the correct way to do it, if you want th:

const theme = useTheme()
const primary = th.color('primary')({ theme })