CODEWITHSUNDEEP
reactjsmaterial-ui
ololo
ololo

Reputation: 2076

How to bolden ListItem text in Material UI React

I have the following styling to embolden the fontWeight of ListItem text in the Material UI library but unfortunately, it isn't working as expected.

Here is the code

  import {
IconButton,
Collapse,
List,
ListItem, ListItemIcon,
ListItemText,
makeStyles,
useTheme
} from '@material-ui/core';

......

  const useNavStyles = makeStyles((theme) => ({
        navLinkItem: {
            borderTopRightRadius: 100,
            borderBottomRightRadius: 100,
            paddingBottom: 12,
            paddingTop: 12,
            backgroundColor: theme.palette.background.paper,
            fontWeight: 'bold' //This is not working
        },
        navLinkIcons: {
            paddingLeft: 20,
        },
        nested: {
            paddingLeft: theme.spacing(4),
        },
    }));

And here I try to use it in my render function as follows

const theme = useTheme();
const classes = useNavStyles(theme);
....
 <ListItem button className={classes.navLinkItem}
                    selected={selectedEntry === title}
 ....

How can this be resolved?

Thank you.

Upvotes: 0

Views: 3611

Answers (2)

Chris Farmer
Chris Farmer

Reputation: 25415

@Gnut's suggestion is correct, but I thought I'd post an example.

The CSS section in https://material-ui.com/api/list-item-text/#css describes class attributes you can apply to effect style changes in various parts of the controls. Here's an example of how to style the primary text in a ListItemText:

const useStyles = makeStyles({
  list: {
    width: 300,
    border: "1px solid gray"
  },
  text: {
    fontWeight: "bold",
    fontFamily: "courier",
    color: "blue",
    backgroundColor: "orange"
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <List className={classes.list}>
        <ListItem button>
          <ListItemText primary="Unstyled" />
        </ListItem>
        <ListItem button>
          <ListItemText primary="Styled" classes={{ primary: classes.text }} />
        </ListItem>
      </List>
    </div>
  );
}

Codesandbox here: https://codesandbox.io/s/inspiring-euclid-gs7fp

Upvotes: 2

Sophon Aniketos
Sophon Aniketos

Reputation: 727

You can have a look at their docs:

How to apply styles to deeper elements

The list of customization points for ListItem is listed here, under CSS section:

ListItem API

At first glance button, root and container should be your first tries.

Upvotes: 0

Related Questions