New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useCss hook #1321
Comments
The main issue with the React Hooks version of React Hooks don't render anything. A possible solution would be to have the hook find its closest "Emotion" parent (either a styled component, a But this may introduce some unexpected behaviors. |
Also useStyle would probably be a better name for the hook 😄 |
Would an API like this be possible: const MyComponent = props => {
const theme = useContext(ThemeContext);
const [Stylesheet, classNames] = useStyles({
foo: { color: theme.red }
});
return (
<>
<Stylesheet />
<div className={classNames.foo} />;
</>
);
}; |
Following the migration from emotion@9 to emotion@10 with function useSuccessNotification(valid, message) {
useEffect(() => {
if (valid) {
toast.success(message, {
className: css({
...
})
});
}
}, [message, valid]);
} Far away from any Do you see how I could make it work without using deprecated library? |
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. |
@Andarist Are there any news about this? Did you discuss if you'd like to implement something like that, or didn't yet get a chance? I'd really like this kind of an API. Even if with limitations — there are runtime-only environments where this could be really nice, and in others I like the proposal with a StyleSheet returned from the hook (though, I would reverse the order: The extra bit of setup would be needed to do only once, while the profit from the DX would be much bigger. |
@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
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 useforwardRef
, etc.The text was updated successfully, but these errors were encountered: