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

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

Add theme override for MuiPickersDay.selected
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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 17 (1 by maintainers)

Most upvoted comments

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
          }
     }
}

+20

janhoeck on Jan 9, 2019

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"
        }
      },
    }
  }

novascreen on Jan 10, 2020

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

wkarim86 on Feb 14, 2019

@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',
          },
        },
      },
    },
})

RobelTekle on Jan 15, 2019

Thanks, I was missing root prop there

andrispraulitis on Jan 10, 2019