Autocomplete custom styles get overwritten by MUI styles (v5)
Open
Nobody has claimed this yet.
scope: autocomplete
support: question
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the autocomplete custom-style ordering problem in the reported MUI v5 environment, starting with the component's styling behavior and the provided screenshot. Verify the expected result by confirming that custom option styles are applied without requiring !important.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100