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>
}

What's your favorite API (aside from the CSS vs JavaScript syntax that can be worked out aside)?

Hooks

const useStyles = createStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.default,
  },
  button: {
    color: theme.palette.primary.main,
  }
}));

export default function Hook() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <button className={classes.button}>Hooks</button>
    </div>
  );
}

Previous work:

• ?

Render props

const Styled = createStyled(theme => ({
  root: {
    backgroundColor: theme.palette.background.default,
  },
  button: {
    color: theme.palette.primary.main,
  }
}));

export default function RenderProps() {
  return (
    <Styled>
      {({ classes }) => (
        <div className={classes.root}>
          <button className={classes.button}>Render props</button>
        </div>
      )}
    </Styled>
  );
}

Previous work:

• ?

Styled components

const Div = styled('div')(theme => ({
  backgroundColor: theme.palette.background.default
}));

const Button = styled('button')(theme => ({
  color: theme.palette.primary.main,
}));

export default function StyledComponents() {
  return (
    <Div>
      <Button>Styled components</Button>
    </Div>
  );
}

Previous work:

• https://www.styled-components.com/
• https://emotion.sh/docs/styled

HOCs

const styles = theme => ({
  root: {
    backgroundColor: theme.palette.background.default,
  },
  button: {
    color: theme.palette.primary.main,
  }
}));

function HOCs(props) {
  return (
    <div className={props.classes.root}>
      <button className={props.classes.button}>HOCs</button>
    </div>
  );
}

export default withStyles(styles)(HOCs);

Previous work:

• http://cssinjs.org/react-jss?v=v8.6.1
• https://material-ui.com/customization/css-in-js/

CSS

export default function CSS() {
  return (
    <div className={css({ backgroundColor: 'white' })}>
      <button className={css({ color: 'blue' })}>CSS</button>
    </div>
  )
}

Previous work:

• https://github.com/callstack/linaria
• https://emotion.sh/docs/css

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).