Question

我正在使用内部为List的反应物料组件ul li。我想在所有li中添加样式（添加底部边框）。一种方法是添加此{{1 }}在所有className={classes.sideBar__listItem__element}中，有没有更好的方法可以执行此任何嵌套方法？

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

ListItem

我正在使用此示例 https://material-ui.com/demos/lists/

Answer 1

1。由于您已经提到要在整个应用程序中全部添加这些内容，因此可以覆盖material-ui中的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>

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

2 个答案: