Skip to content

Instantly share code, notes, and snippets.

@kof kof/button-hooked.js
Last active Nov 2, 2018

Embed
What would you like to do?
Inject styles with custom hooks
const styles = {
button: {
color: 'red'
}
}
const Button = () => {
const {classes} = useStyles(styles)
return <button className={classes.button}>Test<Button>
}
@oliviertassinari

This comment has been minimized.

Copy link

commented Oct 26, 2018

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:

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:

CSS

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

Previous work:

@Janpot

This comment has been minimized.

Copy link

commented Nov 2, 2018

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.

@HenriBeck

This comment has been minimized.

Copy link

commented Nov 2, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.