[Select] Fix specificity of style overrides#25766
Conversation
|
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 46d3f20618..25ede7c405 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -15,17 +15,14 @@ import useForkRef from '../utils/useForkRef';
import useControlled from '../utils/useControlled';
import selectClasses, { getSelectUtilitiyClasses } from './selectClasses';
+// TODO: enable overrides for the icon and nativeInput slots via the components prop
export const overridesResolver = (props, styles) => {
const { styleProps } = props;
return deepmerge(
{
...styles.select,
...styles[styleProps.variant],
- [`& .${selectClasses.icon}`]: {
- ...styles.icon,
- ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]),
- ...(styleProps.open && styles.iconOpen),
- },
+ [`&.${selectClasses.selectMenu}`]: styles.selectMenu,
},
styles.root || {},
); |
@mnajdova The |
@mnajdova overrides for the slots icon and nativeInput can't work currently, as they are not children of the SelectRoot. This can be enabled in the future via the components prop.
|
I remembered why we needed it, it was because of the nature of how emotion rights it's styles. We need to bump the specificity for the overrides 0ae47d9 @robphoenix can you check if this solves all the issues you could spot? |
|
I noticed another inconsistency with this component. It spreads the props from theme's components' default props to the root input component, but the overrides are applied to the select root component. Is the spreading of the default prop correct? Do we expect them to be on the input component? If yes, we need to write manual test for the theme style & variant overrides. cc @oliviertassinari |
|
@mnajdova this solves my original issue CodeSandbox Thankyou 😃 |
| [`&.${selectClasses.selectMenu}`]: styles.selectMenu, | ||
| [`&.${selectClasses[styleProps.variant]}`]: styles[styleProps.variant], | ||
| }, | ||
| styles.root || {}, |
There was a problem hiding this comment.
There was a problem hiding this comment.
There was a problem hiding this comment.
And #25313, which suggest we have no root on this file so: root, select, selectMenu.
There was a problem hiding this comment.
Should we do this in a separate PR?
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
oliviertassinari
left a comment
There was a problem hiding this comment.
I have push an extra commit, to try to push the approach one step ahead


closes #25763