Autocomplete custom styles get overwritten by MUI styles (v5) #30294

UnderTheMoonspell · 2021-12-20T15:40:01Z

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

The text was updated successfully, but these errors were encountered:

mnajdova · 2021-12-21T09:10:15Z

You should use the .MuiAutocomplete-option subselector for adding overrides. Can you share a codesandbox of how you are overriding those? I can help resolve the problem.

UnderTheMoonspell · 2021-12-21T09:19:17Z

I am already using that selector.

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

I forgot to mention I am using CSS modules, but the other components seem to be working fine. There was also a similar problem in a page where I was importing React-Select, but with the performance upgrades to the Selects in MUI5 I don't need React-Select anymore, so I solved it just by removing it.

This is my _app.page.tsx

    <StylesProvider injectFirst>
      <Head>
        <title>Web Onboarding</title>
      </Head>
      <div>
        <Component {...pageProps} />
      </div>
    </StylesProvider>

UnderTheMoonspell · 2021-12-21T11:21:03Z

Actually this also happens in other components, like Select.

P.S.: This app was migrated from V4 according to the migration guide, and it was working as supposed before

mnajdova · 2021-12-21T12:53:50Z

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.

UnderTheMoonspell · 2021-12-21T13:12:16Z

So that's an intended change then? I never had to target '.Mui' selectors before, the classes property used to be enough to target exactly what I needed.

mnajdova · 2021-12-21T14:16:17Z

Yes, we just haven't documented it correctly. I would assume the same would go for the select. If I was using CSS modules, I would always specify all styles with sub-selectors inside the root class name. It's simpler and there won't be any surprises.

UnderTheMoonspell · 2021-12-21T15:36:07Z

@mnajdova ok thanks for the help :)

UnderTheMoonspell · 2021-12-23T15:49:09Z

@mnajdova correct me if I'm wrong but this makes using compose way harder than before, since we can only use 1 level selectors, so .listbox .item { compose: etc from "./etc" } doesnt work anymore.

Also i was able to make this work, but in order to do it, this was what I had to do:

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

Seems way too convoluted. I tried to do it as you said but it didn't work. Heres a codesandbox showing the problem:

https://codesandbox.io/s/autocomplete-css-modules-demo-o1hsk

mnajdova · 2021-12-23T16:59:14Z

Will check it tomorrow

mnajdova · 2021-12-24T08:08:53Z

Here is a working example @UnderTheMoonspell https://codesandbox.io/s/autocomplete-css-modules-demo-forked-udjpj?file=/src/CssModulesSlider.module.css

You were close :) When you use CSS modules you need to specify the selector for the subclass and pass it along. Basically you are again passing all the classes as before, you just bump the specificity for the styles for the option, by rising the selector:

.listbox .option {
  // styles for the option
}

UnderTheMoonspell · 2021-12-29T09:55:31Z

@mnajdova ok thanks for the help, this doesnt change the fact that it now becomes harder to use "composes" which is one of the nice features of CSS Modules.

Also I am having a very hard time trying to do the same for the Select component:

The highest specitivity here is Mui's and it's based on a MuiInput + MuiSelect. That MuiInput is not even costumizable as seen here:

And so, in my use case I have a base select component, which then I use to create, for example, a country select, but this makes overriding a nightmare (to be honest, as I see it, makes it impossible without using !important).

mnajdova · 2022-01-11T11:09:09Z

It's not perfect that you need to bump the specificity here, we should work on improving the DX for customizing the Select overall. This is not specific to CSS modules. You would need to bump the specificity in this case.

UnderTheMoonspell · 2022-01-19T12:38:06Z

@mnajdova how would I bump the specificity here?

Cwittofur · 2022-03-15T14:34:47Z

We are also experiencing the same issues. In MUI 4 our styled components would take priority over the base styles of the components. Now that we have to include even more specificity, it is quite a nightmare. Is there any way we can get this reverted so that styled components take priority? (We also converted from styled-components to emotion). Is there any plan to do this with a timeline? Our team is currently thinking of reverting back to MUI 4 until some of these issues are resolved in a better manner. This affects all of our components, not just autocomplete.

mnajdova · 2022-03-16T13:01:53Z

@Cwittofur if you are using only emotion there shouldn't be any issues. You can even use the styled() utility from @mui/material/styles. Also, if you are using SSR, you will need to configure your project as shown in the examples projects. If you are using any other library for overrides, you would need to make sure the CSS injection order is correct - https://mui.com/guides/interoperability/#css-injection-order

If you can provide an example usage that you have, or create a simple codensadbox/repository to showcase the problem, I can help with it.

tihuan · 2022-04-13T18:19:19Z

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!

UnderTheMoonspell added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 20, 2021

UnderTheMoonspell closed this as completed Dec 21, 2021

UnderTheMoonspell reopened this Dec 23, 2021

mnajdova added component: autocomplete This is the name of the generic UI component, not the React module! support: question Community support but can be turned into an improvement and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 27, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Autocomplete custom styles get overwritten by MUI styles (v5) #30294

Autocomplete custom styles get overwritten by MUI styles (v5) #30294

UnderTheMoonspell commented Dec 20, 2021 •

edited

Loading

mnajdova commented Dec 21, 2021

UnderTheMoonspell commented Dec 21, 2021 •

edited

Loading

UnderTheMoonspell commented Dec 21, 2021

mnajdova commented Dec 21, 2021

UnderTheMoonspell commented Dec 21, 2021 •

edited

Loading

mnajdova commented Dec 21, 2021

UnderTheMoonspell commented Dec 21, 2021

UnderTheMoonspell commented Dec 23, 2021 •

edited

Loading

mnajdova commented Dec 23, 2021

mnajdova commented Dec 24, 2021

UnderTheMoonspell commented Dec 29, 2021 •

edited

Loading

mnajdova commented Jan 11, 2022

UnderTheMoonspell commented Jan 19, 2022

Cwittofur commented Mar 15, 2022 •

edited

Loading

mnajdova commented Mar 16, 2022

tihuan commented Apr 13, 2022 •

edited

Loading

Autocomplete custom styles get overwritten by MUI styles (v5) #30294

Autocomplete custom styles get overwritten by MUI styles (v5) #30294

Comments

UnderTheMoonspell commented Dec 20, 2021 • edited Loading

Duplicates

Latest version

Current behavior 😯

Expected behavior 🤔

Your environment 🌎

mnajdova commented Dec 21, 2021

UnderTheMoonspell commented Dec 21, 2021 • edited Loading

UnderTheMoonspell commented Dec 21, 2021

mnajdova commented Dec 21, 2021

UnderTheMoonspell commented Dec 21, 2021 • edited Loading

mnajdova commented Dec 21, 2021

UnderTheMoonspell commented Dec 21, 2021

UnderTheMoonspell commented Dec 23, 2021 • edited Loading

mnajdova commented Dec 23, 2021

mnajdova commented Dec 24, 2021

UnderTheMoonspell commented Dec 29, 2021 • edited Loading

mnajdova commented Jan 11, 2022

UnderTheMoonspell commented Jan 19, 2022

Cwittofur commented Mar 15, 2022 • edited Loading

mnajdova commented Mar 16, 2022

tihuan commented Apr 13, 2022 • edited Loading

UnderTheMoonspell commented Dec 20, 2021 •

edited

Loading

UnderTheMoonspell commented Dec 21, 2021 •

edited

Loading

UnderTheMoonspell commented Dec 21, 2021 •

edited

Loading

UnderTheMoonspell commented Dec 23, 2021 •

edited

Loading

UnderTheMoonspell commented Dec 29, 2021 •

edited

Loading

Cwittofur commented Mar 15, 2022 •

edited

Loading

tihuan commented Apr 13, 2022 •

edited

Loading