Open cysabi opened 1 year ago
@LeptoFlare, the AutoComplete
component uses Paper
underneath for the options list. Depending on what you want to do, I think that you may choose one of these options:
1) Local: Update the Paper in selected AutoComplete
<Autocomplete
componentsProps={{
paper: { sx: { bgcolor: "grey.500" } }, // or static color like "#293346"
}}
/>
2) Global: Update the Paper in AutoComplete (in the whole UI)
export const theme = createTheme({
// [...]
components: {
MuiAutocomplete: {
styleOverrides: {
paper: {
backgroundColor: "#293346",
},
},
},
},
})
3) Global: Update the Paper background color (in the whole UI)
export const theme = createTheme({
palette: {
mode: "dark",
// [...]
background: {
paper: "#293346"
}
},
})
I believe that the 2nd or 3rd (global) option will suit you well, given that you want to make this theme global. The background.paper
will affect much more components though, so it's less safe.
thanks for the response! however i'm already using a (less elegant) workaround, and would just like to see this fixed.
Unfortunately, I don't think that it may be changed on the MUI side.
The default palette is using static colors (i.e. background.paper
is #121212
), not the theme color dynamically (like palette.gray
).
That change would create more problems, most importantly:
Indeed, the Paper background does not use the color from the grey
palette. @mnajdova, @siriwatknp, @danilo-leal, do you have any idea why this was implemented as such?
Thanks for analyzing the issue, @rangoo94. Your suggestions are valid. @LeptoFlare I'd suggest option 3 if you want all the popups in your application to have a custom background.
understood! thanks for the explanation
@michaldudak, it looks like historically there was an idea to use the grey
palette, but it would affect too many components (https://github.com/mui/material-ui/pull/10015). It's a valid point, both for MUI internals and external libraries.
Putting that aside, I think that the current solution makes sense:
grey
palette (it's using #ffffff
for light and #121212
for dark mode, and they don't correlate together)NativeSelectInput
is using it for styling dropdown options, and couldn't use Paper
directly in optgroup
)It may be worth to consider merging background.paper
and background.default
together though - looking at the code, it feels like these are used alternatively anyway (while shouldn't be).
Duplicates
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
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 π
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.5npx @mui/envinfo