[Select] Fix specificity of style overrides

[robphoenix]

closes #25763

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against e793fda

[mnajdova]

filled and outlined are already supported by styles[variant]. I noticed another problem here - ovrerides 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. So for now I'd suggest we do this in addition:

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 || {},
   );

[robphoenix]

So for now I'd suggest we do this in addition
✅

@mnajdova The outlined style overrides appear to be being overwritten by the hardcoded values? In this case, the height/min-height CodeSandbox

[mnajdova]

Ok, I think the root problem is the bumbed sepcificy for the selectMenu in the SelectRoot. I've tried 24b9dd4 let's see if it will cause any other problems, if this work, we can add tests to ensure we don't have regressions the future

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?

[mnajdova]

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

[robphoenix]

@mnajdova this solves my original issue CodeSandbox

Thankyou 😃

[oliviertassinari]

https://github.com/mui-org/material-ui/blob/d72862cf60b2ea314b5d9e3ed163a0f605e2eef2/packages/material-ui/src/NativeSelect/NativeSelectInput.js#L25

[oliviertassinari]

https://github.com/mui-org/material-ui/blob/d72862cf60b2ea314b5d9e3ed163a0f605e2eef2/packages/material-ui/src/Select/SelectInput.js#L356-L358

[oliviertassinari]

Referencing #11646 where we plan to simply this

[oliviertassinari]

And #25313, which suggest we have no root on this file so: root, select, selectMenu.

[mnajdova]

Should we do this in a separate PR?

[oliviertassinari]

Probably, yes

[oliviertassinari]

I have push an extra commit, to try to push the approach one step ahead