Inject styles with custom hooks

button-hooked.js

const styles = {
  button: {
    color: 'red'
  }
}

const Button = () => {
  const {classes} = useStyles(styles)
  return <button className={classes.button}>Test<Button>
}

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 useEffect to control recalculations.

@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 createUseStyles function right now).

how can i use a hook from inside a separate style file ?