MUI Error :: The `MuiMenuItem` component increases the CSS specificity of the `selected` internal state

📍 문제사항

회사에서 MUI기반의 UI를 사용하고 있는데 Custom이 필요한 부분은 styleOverrides로 수정하고 있다.

여기서 MenuItem의 높이는 38px, selected된 MenuItem의 backgroundColor는 red로 지정하고 싶어
아래와 같이 코드를 작성했다.

root 아래 클래스 선택자를 이용하여 style을 입히는 방법도 있지만
selected, disabled등의 키가 자동 import 되기 때문에 아래와 같이 작성했다

    MuiMenuItem: {
      styleOverrides: {
        root: {
          height: `38px`,
        },
        selected: { backgroundColor: `red` },
      },
    },

 

그 런 데 .. 
콘솔에 아래와 같은 로그가 에러 로그가 찍혔다
클래스 선택자를 사용하라는 안내였다

client.js:1 MUI: The `MuiMenuItem` component increases the CSS specificity of the `selected` internal state.
You can not override it like this: 
{
  "root": {
    "height": "38px"
  },
  "selected": {
    "backgroundColor": "red"
  }
}

Instead, you need to use the '&.Mui-selected' syntax:
{
  "root": {
    "&.Mui-selected": {
      "backgroundColor": "red"
    }
  }
}

 

 

원인

친절히 수정방식까지 알려줘서 에러를 없애긴 했지만 이유가 궁금했다

CSS Selector Classes in styleOverrides Error: MUI: The `MuiMenuItem` component increases the CSS specificity of... · Issue #307

검색해본 결과

You should apply the selector styles on the root, as the state classes increase the CSS specificity by design. We cannot remove these keys at this moment as those would be breaking changes, but they are already listed for the changes we need to do in v6.

위와 같은 답변을 볼 수 있었다

상태 클래스 키(?) 예를들어 disabled, selected와 같은 키가 디자인상 CSS 우선순위를 증가시키기 때문에
root에 선택자를 이용하여 스타일 입힐것을 안내하고 있다. 
자동 완성으로 불러와지는 키들은 v6에서 제거될것이라고 한다.

 

해결

안내해준대로 root안에서 선택자를 이용해서 스타일을 수정하자!