how to add style (add bottom border )in all li in react?

I a using react material components List which internally is ul li.I want to add style in all li (add bottom border) .one way is to add this className=classes.sideBar__listItem__element
in all ListItem is there any better way to do this any way to do nesting ?

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


I am using this example
https://material-ui.com/demos/lists/

li

li

here is i am saying to whole application

this page

2 Answers
2

You can do something like the following:

https://codesandbox.io/s/w25y98zpqk

Add style tag in your component:

style

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

`</style>


1.Since you have mentioned that you want to add these all across the application, you can override the MuiListItem component in material-ui
here is an example

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


and then you can use your code inside MuiThemeProvider tags as here:

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>


here is a working example: https://codesandbox.io/s/3xx74v8y6m

find more details from here: https://material-ui.com/customization/overrides/

2.There is also a second method that is when you don't want to have the override component across the application

That method is :

create a custom Component with override values

const CustomListItem = withStyles(theme => (
root:
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,

))(ListItem);


and then you can use the CustomListItem in the places you desire.

CustomListItem

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.