Emotion: (emotion-theming) do i use withTheme or not?

[rileylnapier]

reading this article: it says we no longer need to use withTheme.
https://medium.com/@tkh44/emotion-8-9f892346d0af

But clicking into the documentation of emotion-theming, it says to use it...
https://github.com/emotion-js/emotion/blob/master/packages/emotion-theming/README.md#api

sooo, do I use it or not?

[rileylnapier]

or is that that i need to wrap components with withTheme, just not wrap styled.div``??

[probablyup]

You don't need to use withTheme() on components created with react-emotion like:

const Thing = styled.div`
  color: {p => p.theme.color};
`;

However if you want to consume theme properties in a normal React component, that's when you use the withTheme() HOC.

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.theme.text}</div>
  }
}

const ThemedMyComponent = withTheme(MyComponent);

[kevinSuttle]

The wording in the docs is a bit confusing still.

Also, there are no examples of function components here. Is there a reason for that?

[Andarist]

Also, there are no examples of function components here. Is there a reason for that?

No, there is not - it's just the same with class component as it is with function ones.

[kevinSuttle]

Thanks, @Andarist. Reason I ask is I was using with Flow, and it didn't pick up the Props. Can open a separate issue if you'd like.

A separate implementation I have seen is something like this:

const _ThemeContext: React.Context<Theme> = React.createContext(defaultTheme);
_ThemeContext.displayName = 'ThemeContext';
const ThemeContext = Object.create(_ThemeContext);

export {ThemeContext};

export const useTheme = () => React.useContext(_ThemeContext);

export const withTheme = <Props: {theme: Theme}>(
  Component: React.AbstractComponent<Props>
): React.AbstractComponent<$Diff<Props, {theme: Theme}>> => {
  const NewComponent = React.memo(props => (
    <Component {...props} theme={useTheme()} />
  ));
  NewComponent.displayName = Component.displayName || Component.name || 'Component'
  return NewComponent;
};

[Andarist]

Better to open a new issue then