Inject styles with custom hooks
This comment has been minimized.
This comment has been minimized.
Pure from an API consumer point of view, I think I'd prefer to do: const MyButton = ({ children, spacing = 10 }) => {
const theme = useTheme();
const myButtonClass = useStyles({
color: theme.color,
padding: spacing,
margin: 20
}, [ spacing, theme.color ]);
return (
<button className={myButtonClass}>
{children}
</button>
);
} Basically: 1 class per hook, and use props directly. Pass an array similar to |
This comment has been minimized.
This comment has been minimized.
@Janpot The problem with using props directly is that we wouldn't be able to reuse stylesheets across different component instances as soon as you introduce props. The second problem with that would be the injection order (this is also the reason why we need |
This comment has been minimized.
This comment has been minimized.
how can i use a hook from inside a separate style file ? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
What's your favorite API (aside from the CSS vs JavaScript syntax that can be worked out aside)?
Hooks
Previous work:
Render props
Previous work:
Styled components
Previous work:
HOCs
Previous work:
CSS
Previous work: