Popper background color does not respect custom theme
Nobody has claimed this yet.
- 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
Steps to reproduce 🕹
Link to live example:
https://github.com/cq-overlays/dashboard (I have a workaround in overrides.css)
Steps:
- Create custom theme and overwrite the "grey" color with your own shades
export const theme = createTheme({
palette: {
mode: "dark",
primary: {
light: "#008585",
main: "#00BEBE",
dark: "#33cbcb",
contrastText: "#fff",
},
secondary: {
light: "#ab003c",
main: "#f50057",
dark: "#f73378",
contrastText: "#fff",
},
grey: {
50: "#626E84",
100: "#232c3d",
200: "#263042",
300: "#293346",
400: "#2c374b",
500: "#2f3a4f",
600: "#38445a",
700: "#414d64",
800: "#4a566e",
900: "#525f78",
A700: "#626E84",
A400: "#707B8F",
A200: "#7D8799",
A100: "#8992A2",
main: "#293346",
dark: "#2c374b",
},
},
})
- Create an Autocomplete component
- Select the component so the popper appears
Current behavior 😯
Currently, the popper has a background color of the default "grey", rather than the grey set in your custom theme:

My custom grey theme is a very blue shade, but as you can see the background color is far more neutral. The custom primary color from my theme is inherited correctly.
Expected behavior 🤔
The background color of this popper should be derived from the custom theme the same way the primary color is.
Context 🔦
I'm attempting to create an autocomplete component, and I have a custom theme.
I would like to add that this is my first time making an issue on this repo so I apologize if I have missed a step.
My first assumption was that the popper must have been portal'd outside of the ThemeProvider context, but the dark mode and primary color are inherited fine, so that must not be it.
Your environment 🌎
npx @mui/envinfo
System:
OS: Linux 5.10 Ubuntu 20.04.5 LTS (Focal Fossa)
Browser: Firefox
Binaries:
Node: 19.2.0 - ~/.nvm/versions/node/v19.2.0/bin/node
Yarn: Not Found
npm: 8.19.3 - ~/.nvm/versions/node/v19.2.0/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
@emotion/react: ^11.10.5 => 11.10.5
@emotion/styled: ^11.10.5 => 11.10.5
@mui/base: 5.0.0-alpha.116
@mui/core-downloads-tracker: 5.11.7
@mui/material: ^5.11.7 => 5.11.7
@mui/private-theming: 5.11.7
@mui/styled-engine: 5.11.0
@mui/system: 5.11.7
@mui/types: 7.2.3
@mui/utils: 5.11.7
@types/react: ^18.0.27 => 18.0.27
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.9.5 => 4.9.5
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
Start with the linked cq-overlays/dashboard example and reproduce the Autocomplete case using the custom theme shown in the issue. Trace the Autocomplete Popper styling and ThemeProvider inheritance, then verify that the displayed background uses the custom grey palette rather than the default grey.
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
- Clearly specified
- Newbie friendliness
- 52/100