Autocomplete custom styles get overwritten by MUI styles (v5)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

After upgrading to MUI5, the autocomplete options custom styles are loaded after the MUI styles which makes me use !important to override the styles.

Expected behavior 🤔

My styles should be loaded first like in other components in order to avoid the use of !important.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 11.6.2
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Not Found
    Firefox: 93.0
    Safari: 15.2
  npmPackages:
    @emotion/react: ^11.5.0 => 11.5.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.54 
    @mui/lab: ^5.0.0-alpha.54 => 5.0.0-alpha.54 
    @mui/material: ^5.1.0 => 5.1.0 
    @mui/private-theming:  5.1.0 
    @mui/styled-engine:  5.1.0 
    @mui/styles: ^5.1.0 => 5.1.0 
    @mui/system:  5.1.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.1.0 
    @types/react: ^17.0.22 => 17.0.24 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: ^4.4.3 => 4.4.3 

[mnajdova]

I am already using that selector.

You are not based on the code. You should use something like:

styles.css

 .listbox {
+  // Need to bump the specificity on the options
+  & .MuiAutocomplete-option {
+    // the menuItem styles
+ }
}

  <Autocomplete
    id={name}
    classes={{
-     option: styles.menuItem,
      listbox: styles.menuList,
      noOptions: styles.noOptions,
      groupLabel: styles.headerItem,
    }} />

If there are problems please create a codesandbox, otherwise, it’s hard to iterate and verify that it works. cc @hbjORbj probably these are more opportunities for improving the migration guide.

[tihuan]

We’re probably missing something, but Dialog doesn’t seem to append the custom styles at the end?

In this codesanbox, we create a custom Paper component and use it in Dialog:

const StyledPaper = styled(Paper)`
  background-color: pink;
  max-width: revert; // <-- doesn't work
  width: 1200px;
`;

<Dialog ... PaperComponent={StyledPaper}>
  ...
</Dialog>

But somehow our custom style rules are not appended at the end of the Paper class, so we can’t override max-width:

However, if we wrap our custom style with & { ... }, then the custom styles are in their own inline style tag, and thus works:

codesandbox

const StyledPaper = styled(Paper)`
  & { // <-- net change
      background-color: pink;
      max-width: revert; // <-- works now!
      width: 1200px;
  }
`;

Question:

Is it normal that sometimes custom styles are appended at the end of the rules and sometimes it’s not?

Our suspicion is that perhaps our custom styles are in the middle of the MuiDialog-paper css class, because Dialog adds more default MUI styles to its PaperComponent, thus overriding our custom StyledPaper. And if this is the intended behavior, is & { ... } the recommended solution?

Thank you!

CC: @mnajdova please kindly help take a look at this if possible, since resolving/clarifying this will help our company’s design system MUIv5 roll out 😄 🙏

UPDATE: Created a separate issue for SEO!