score:0

Accepted answer
import React from "react";
import { makeStyles, useTheme } from "@material-ui/styles";
import { List, ListItem } from "@material-ui/core";
import "./style.css";

const Demo = () => {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <>
      <List>
        <ListItem className={classes.listItem}>
          Using useStyles (classes)
        </ListItem>
        <ListItem style={{ color: theme.palette.primary.dark }}>
          Using inline direct theme
        </ListItem>
      </List>
      <List className={classes.list}>
        <ListItem>Having List control over all ListItem styles</ListItem>
      </List>
    </>
  );
};

export default Demo;

const useStyles = makeStyles(theme => ({
  listItem: {
    color: theme.palette.primary.light
  },
  list: {
    color: theme.palette.primary.main
  }
}));


Related Query

More Query from same tag