如何在所有li中添加样式（添加底部边框）？

Question

我使用反应材料成分List内部是ul li。我想在所有li添加样式（添加底部边框）。一种方式是添加这个className={classes.sideBar__listItem__element} in所有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组件 - 这是一个例子

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>