useCss hook

@mitchellhamilton hey, I’m not sure if this is possible because I don’t know the exact internals of emotion, but from a conceptual level this might make sense.

I’m wondering if we could do something like

const MyComponent = props => {
   const theme = useContext(ThemeContext);
   const className = useCss({color: theme.red});
   return (
     <div className={className}>
       MyComponent
     </div>
    );
}

any thoughts?

from a birds eye view, some thoughts here are, you now don’t need to worry about shouldForwardProp you don’t need to interpolate with color: ${props => props.theme.red} and the entire component doesn’t need to be wrapped, if the ref needs to be forwarded, then you just use forwardRef, etc.

[Andarist]

We’ll rethink how this problem can be handled right now. We are working on a v11, so we’d like to address problems like this. The solution is not obvious - so no promises yet, but please know that we are going to think about this.

[ekaradon]

Following the migration from emotion@9 to emotion@10 with react-toastify, I am also facing an issue here. I have the following hook:

function useSuccessNotification(valid, message) {
    useEffect(() => {
        if (valid) {
            toast.success(message, {
                className: css({
                    ...
                })
            });
        }
    }, [message, valid]);
}

Far away from any render, So I cannot use the ClassNames render prop tip. A hook would be really nice.

Do you see how I could make it work without using deprecated library?