Как добавить стиль (добавить нижнюю границу) во всех li в реаги?

Question

Я использую реагирующие материальные компоненты List который внутренне ul li.Я хочу добавить стиль во всех li (добавить нижнюю границу) . Один из способов это добавить className={classes.sideBar__listItem__element} в целом ListItem Есть ли лучший способ сделать это каким-либо образом сделать вложение?

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

Я использую этот пример https://material-ui.com/demos/lists/

Answer 1

1. Так как вы упомянули, что хотите добавить все это в приложение, вы можете переопределить компонент MuiListItem в material-ui. Вот пример

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

и тогда вы можете использовать свой код внутри MuiThemeProvider теги как здесь:

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

Вот рабочий пример: https://codesandbox.io/s/3xx74v8y6m

найти более подробную информацию здесь: https://material-ui.com/customization/overrides/

2. Существует также второй метод, который заключается в том, что вы не хотите, чтобы компонент переопределения использовался в приложении.

Этот метод:

создать пользовательский компонент со значениями переопределения

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

и тогда вы можете использовать CustomListItem в местах, которые вы желаете.

Answer 2

Вы можете сделать что-то вроде следующего:

https://codesandbox.io/s/w25y98zpqk

добавлять style тег в вашем компоненте:

  <style>{`
    li {
      border-bottom: 1px solid #444;
    }
  `}</style>