how to add style (add bottom border )in all li in react?

Question

I a using react material components List which internally is ul li.I want to add style in all li (add bottom border) .one way is to add this className={classes.sideBar__listItem__element} in all ListItem is there any better way to do this any way to do nesting ?

https://codesandbox.io/s/1yr3nlqp74

import React, { Fragment } from "react";
import { Paper, ListItem, List, ListItemText } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  sideBar__block: {
    padding: 20
  },
  sideBar__list__element: {
    li: {
      borderBottom: "1px solid rgb(212, 212, 212)"
    }
  },

  sideBar__listItem__element: {
    borderBottom: "1px solid rgb(212, 212, 212)"
  }
};
const SideBar = props => {
  const { classes } = props;
  return (
    <div className={classes.sideBar__block}>
      <Paper className={classes.sideBar__list__element}>
        <List>
          <ListItem className={classes.sideBar__listItem__element}>
            <ListItemText primary="form" secondary=" FORM" />
          </ListItem>
          <ListItem>
            <ListItemText primary="E" secondary=" Inbox" />
          </ListItem>
          <ListItem>
            <ListItemText primary="re box" secondary=" Inbox" />
          </ListItem>
          <ListItem>
            <ListItemText primary="Upload" secondary="upload" />
          </ListItem>
        </List>
      </Paper>
    </div>
  );
};

export default withStyles(styles)(SideBar);

I am using this example https://material-ui.com/demos/lists/

Answer 1

1.Since you have mentioned that you want to add these all across the application, you can override the MuiListItem component in material-ui here is an example

const theme = createMuiTheme({
  overrides: {
    // Name of the component
    MuiListItem: {
      // Name of the rule
      root: {
        // Some CSS
        borderBottom: "3px solid rgb(212, 212, 212)"
      },
    },
  },
});

and then you can use your code inside MuiThemeProvider tags as here:

<MuiThemeProvider theme={theme}>
   <div>
      <List component="nav">
        <ListItem button>
          <ListItemText primary="Trash" />
        </ListItem>
        <ListItem button component="a" href="#simple-list">
          <ListItemText primary="Spam" />
        </ListItem>
      </List>
    </div>
  </MuiThemeProvider>

here is a working example: https://codesandbox.io/s/3xx74v8y6m

find more details from here: https://material-ui.com/customization/overrides/

2.There is also a second method that is when you don't want to have the override component across the application

That method is :

create a custom Component with override values

const CustomListItem = withStyles(theme => ({
  root: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  }
}))(ListItem);

and then you can use the CustomListItem in the places you desire.