Material-ui-pickers: MUI throws warning about theme override for selected state

[novascreen]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 2.0.5 |
| material-ui | 3.8.1 |
| React | 16.7.0 |
| Browser | any |
| Peer library | date-fns |

Steps to reproduce

1. Add theme override for MuiPickersDay.selected
2. Load a page with date picker on it

Expected behavior

No MUI warnings

Actual behavior

Material UI throws a warning:

Warning: Material-UI: the `MuiPickersDay` component increases the CSS specificity of the `selected` internal state.
You can not override it like this: 
{
  "selected": {
    "backgroundColor": "#002d52",
    "color": "#fff",
    "&:hover": {
      "backgroundColor": "#003B64"
    }
  } ...
}

Instead, you need to use the $ruleName syntax:
{
  "&$selected": {
    "backgroundColor": "#002d52",
    "color": "#fff",
    "&:hover": {
      "backgroundColor": "#003B64"
    }
  }
}

https://material-ui.com/customization/overrides#internal-states

The code for this warning was introduced here:
https://github.com/mui-org/material-ui/pull/13919
It seems there are conventions around the specific keys 'disabled', 'focused', 'selected', 'checked'

Live example

https://codesandbox.io/s/vyx915vll7

[janhoeck]

I have the same issue. How can I fix it?

[andrispraulitis]

Same issue here with MuiListItem disabled

[janhoeck]

Same issue here with MuiListItem disabled
@andrispraulitis

The MuiListItem Component is a Component of the @material-ui/core package and isnt in any relation with this project.
But never mind - I can help you :)

Just do something link this in your theme:

"MuiListItem": {
     "root": {
          "&$disabled": {
                // your disabled styles here
          }
     }
}

[andrispraulitis]

Thanks, I was missing root prop there

[RobelTekle]

@janhoeck I still have some issues with your solution, I receive a warning message Warning: Material-UI: you are trying to override a style that does not exist. Fix the 'root' key of theme.overrides.MuiPickersDay.and the app crash because Uncaught TypeError: Cannot read property '&$selected' of undefined

const theme = createMuiTheme({
  MuiPickersDay: {
      root: {
        '&$selected': {
          backgroundColor: 'black',
          '&:hover': {
            backgroundColor: 'black',
          },
        },
      },
    },
})

[janhoeck]

@RobelTekle you are right, this solution does not work with material-ui-pickers. We have to wait for a bug fix from @dmtrKovalenko or we do a pull-request.

[hcygit]

this issue still occurs, please fix it

[dmtrKovalenko]

@hcygit Provide a way to reproduce.

[novascreen]

Please check my codesandbox, it shows the cause of the error and commented out the way to fix it:

  overrides: {
    MuiPickersDay: {
      day: {
        '&$selected': {
          color: "red"
        }
      },
    }
  }

[hcygit]

@novascreen Thank you, solved. It's all because of the wrong example code in the official site....

[krish5]

@novascreen : Thanks a lot. The issue got fixed. material-ui-pickers documentation should be modified properly.

[wkarim86]

@RobelTekle it worked for me after wasting few hours thanks.

[jrwstevenson]

Thanks for this. My code was working, but I was getting an error. I had to change:
MuiBottomNavigationAction: { selected: { color: "#2179ee", }, },

to:
MuiBottomNavigationAction: { root: { "&$selected": { color: "#2179ee", }, }, },

[wkarim86]

Thanks for this. My code was working, but I was getting an error. I had to change:
MuiBottomNavigationAction: { selected: { color: "#2179ee", }, },

to:
MuiBottomNavigationAction: { root: { "&$selected": { color: "#2179ee", }, }, },
@jrwstevenson
remove the commas like this { root: { "&$selected": { color: "#2179ee" } } }

[rafamem]

I have the following problem...

This works:

MuiInput: {
disabled: {
color: '#282c2e',
'&:before': {
borderColor: '#e5e5e5 !important',
pointerEvents: 'none',
},
}
},...

But this Material UI recommendation returns error:

"&$disabled": {
"color": "#282c2e",
"&:before": {
"borderColor": "#e5e5e5 !important",
"pointerEvents": "none"
}
}

How can I disable that annoying warning?

My version: "@material-ui/core": "^3.9.3",

[michaeldaineka]

I have the following problem...

This works:

MuiInput: {
disabled: {
color: '#282c2e',
'&:before': {
borderColor: '#e5e5e5 !important',
pointerEvents: 'none',
},
}
},...

But this Material UI recommendation returns error:

"&$disabled": {
"color": "#282c2e",
"&:before": {
"borderColor": "#e5e5e5 !important",
"pointerEvents": "none"
}
}

How can I disable that annoying warning?

My version: "@material-ui/core": "^3.9.3",

the same problem

[pmasharov]

Same issue here with MuiListItem disabled
@andrispraulitis

The MuiListItem Component is a Component of the @material-ui/core package and isnt in any relation with this project.
But never mind - I can help you :)

Just do something link this in your theme:

"MuiListItem": {
     "root": {
          "&$disabled": {
                // your disabled styles here
          }
     }
}

It works for my MuiButton