CODEWITHSUNDEEP
reactjsmaterial-ui
user13652548
user13652548

Reputation:

Issue trying to override mui theme in Reactjs

I have a navbar with some list items and I want to override the style of MuiListItemText when MuiListItemButton is selected. I can override the hightlight but can't do it with the text or the icon. I can override the ListItemText but all of them, I just want to override if 'selected' (Mui-selected). I'm using Mui 5.2.0. This is my approach.

const Theme = createTheme({
    components: {        
         MuiListItemButton: {
            styleOverrides: {
              root: {
                borderRadius: '4px',
                padding: '12px',
                '&.Mui-selected': {
                  backgroundColor: '#F2F2EA',

                  MuiListItemText: {
                    styleOverrides: {
                      secondary: {
                        color: 'red',
                             ...

Upvotes: 0

Views: 2129

Answers (2)

hotcakedev
hotcakedev

Reputation: 2515

You should define the overriding theme structure in the same depth.

const Theme = createTheme({
    components: {        
         MuiListItemButton: {
            styleOverrides: {
              root: {...}
            }
         },
         // it should be another component, not a nested structure
         MuiListItemText: {
            styleOverrides: {
              secondary: {
                ...

And you can customize an individual component by using sx prop, styled-components, or makeStyles API.

https://mui.com/customization/how-to-customize/

Here's an example using styled-components.

const CustomListItemButton = styled(ListItemButton)(() => ({
  borderRadius: '4px',
  padding: '12px',
  '&.Mui-selected': {
    backgroundColor: '#F2F2EA',
    ...
}));

Upvotes: 1

Esmaeli
Esmaeli

Reputation: 103

Try this:

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

Upvotes: 0

Related Questions