CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
high incompetance
high incompetance

Reputation: 2658

How to change background color of a selected ItemList Material-Ui

I have created a selectable component using Material-UI

let SelectableInfiniteList = makeSelectable(Infinite);

and put ListItem inside, now I want to change the default grayish color of a selected item, but I don't know how, if I give it a className

<ListItem className="list-item" primaryText={i}/>

and use list-item:focus selector I can change the background color as long as it is focused (but if I click somewhere else in the app) the focus is lost and the gray color shows up on the (still) selected item,

is there a way to change the selected item background color?

Upvotes: 19

Views: 48421

Answers (10)

Jess
Jess

Reputation: 1

If you're making React based app, you can make new state and set backgroundColor based on that.

const [states, setStates] = useState([]);
const [selectedStateId, setSelectedStateId] = useState('');
const handleStateClick = (stateId) => {
  setSelectedStateId(stateId);
};

And then, you'll probably map the states inside the List. For each list item, you can do this.

<ListItemButton
  sx={{
    backgroundColor: state.id === selectedStateId ? theme.palette.grey[300] : 'inherit',
    '&:hover': {
      backgroundColor: theme.palette.grey[300]
    }
  }}
  onClick={() => handleStateClick(state.id)}
></ListItemButton>

Upvotes: 0

Timothy T. Joe
Timothy T. Joe

Reputation: 21

Work best when you used styled-components:

    const CustomListItem = styled(ListItem)`
         &&.Mui-selected {
           background-color: grey;
         }
    `

Use the the component in your code:

<CustomListItem>
...
</CustomListItem>

Upvotes: 1

high incompetance
high incompetance

Reputation: 2658

In your Higher Order Component add new property selectedItemStyle!

<ComposedComponent selectedItemStyle={selectedItemStyle} value={this.state.selectedIndex} onChange={this.handleRequestChange} containerHeight={this.props.containerHeight} elementHeight={40}>
   {this.props.children}
</ComposedComponent>

Where selectedItemStyle is:

const selectedItemStyle = {
 backgroundColor: 'red'
}

Upvotes: 6

Andres Ramirez H
Andres Ramirez H

Reputation: 1

Based on the CSS rules of the TablePagination component(Material UI v3.9.4):

  menuItem:{
    "&[class*='MuiMenuItem-selected-']":{
      backgroundColor: "red !important",
    },
  },

Upvotes: 0

Michał Wanat
Michał Wanat

Reputation: 185

const theme = createTheme({
  components: {
    MuiListItem: {
      styleOverrides: {
        root: {
          backgroundColor: 'blue',

          '&.Mui-selected': {
            backgroundColor: 'red',
          },
        },
      },
    },
  },
});

Upvotes: 5

chickahoona
chickahoona

Reputation: 2034

Using Material UI v4 and this worked for me:

<ListItem button classes={{ root: classes.listItemRoot }}>
  ...
</ListItem>

with:

const useStyles = makeStyles((theme) => ({
  listItemRoot: {
    "&.Mui-selected": {
        backgroundColor: 'red',
    }
  },
}));

Upvotes: 3

nghiaht
nghiaht

Reputation: 795

If you prefer local custom style, you can override material-ui's component styles by classes (https://material-ui.com/customization/components/#overriding-styles-with-classes)

...
selected    .Mui-selected   Pseudo-class applied to the root element if selected={true}.
...

The rule name we would override is: selected
  • Create your custom styles like you want
// For example
const useStyles = makeStyles((theme) => ({
  listItemSelected: {
    color: 'red',
  },
}));
  • Override ListItem's classes
// Override rule "selected" by "listItemSelected"
<ListItem classes={{selected: listItemSelected}}>
  <ListItemText primary={"Hi"} />
</ListItem>

If you want to override global styles for it, please follow:

Upvotes: 2

Season
Season

Reputation: 4366

If you're interested in an approach without overriding styles globally,

import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    '&$selected': {
      backgroundColor: 'red',
      '&:hover': {
        backgroundColor: 'yellow',
      }
    },
  },
  selected: {},
});

const CustomSelectedListItem = (
  <ListItem
    button
    classes={{ root: classes.root, selected: classes.selected }}
    selected
  >
    <ListItemText primary="List Item" />
  </ListItem>
);

Codesandbox. Material-UI docs.

Upvotes: 7

thisismydesign
thisismydesign

Reputation: 25064

I had to use Global Theme override: https://material-ui.com/customization/components/#global-theme-override

const muiTheme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        "&$selected": {
          backgroundColor: "red",
          "&:hover": {
            backgroundColor: "orange",
          },
        },
      },
      button: {
        "&:hover": {
          backgroundColor: "yellow",
        },
      },
    },
  },
});

Upvotes: 10

Amruth
Amruth

Reputation: 5912

Change default selected gray color by passing selected style like this.

<ListItem
        button
        selected={true}
        classes={{ selected: classes.active }}>
  <ListItemText primary={item.name} />
</ListItem>

Style object should be like this.

active: {
  backgroundColor: "red"
}

Upvotes: 7

Related Questions