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

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

0 голосов
/ 03 сентября 2018

Я использую компоненты реагирующего материала 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 / демки / списки /

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

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 в местах, которые вы хотите.

0 голосов
/ 03 сентября 2018

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

https://codesandbox.io/s/w25y98zpqk

Добавьте style тег в ваш компонент: 

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