1

我使用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/

4

1 回答 1

2

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在你想要的地方使用。

于 2018-09-03T13:52:33.830 回答