Emotion: v10 theming and react hooks?

[deep-c]

Sorry maybe ive gotten wayyyy ahead of myself but it doesnt seem what is being proposed here https://github.com/emotion-js/emotion/pull/973 works with hooks as of yet right? It wasnt clear from that PR whether further work was required to get it to work or whether it should work.

This style doesnt work (didnt try any of the other since this would be the one id be using).

let StyledButton = styled.button(() => {
  let theme = useTheme();
  return {
    color: theme.colors.primary
  };
});

https://codesandbox.io/s/7j39oj02zx

Hooks can only be called inside the body of a function component.

Also noticed styling wasnt working properly but i think thats just an issue with the example.

Could someone confirm?

Thanks

[mitchellhamilton]

Yep, it doesn't work right now but once styled uses hooks internally, it'll work.

[bigmstone]

Until then you can do something similar to this:

import React from 'react';
import styled from '@emotion/styled';
import { useTheme } from './myTheme'

const StyledButton = styled.button`
  color: ${props => props.theme.colors.primary}
`;

export const Button = (props) => {
  const theme = useTheme();
  return(
    <StyledButton theme=theme  {...props} />
  );
};

I'm doing this on a project that won't ship until after 16.7 is shipped. I feel like this approach will bridge the gap fine and be easy to change over once styled uses hooks.

[luishdz1010]

Any updates on this?

[alansouzati]

I'm watching this too. Is there any active work going on emotion to migrate from context consumers to hooks?

There are performance issues with emotion because it uses the context consumer. and I'm hoping this problem will be fixed by moving away from it.

[CodeWitchBella]

Currently I am using this

import { ThemeContext } from '@emotion/core'
import { useContext } from 'react'

export const useTheme = () => useContext(ThemeContext)

But it would be nice to have this in emotion-theming

[Andarist]

useTheme has been published in [email protected]