[Select] Fix specificity issue

[aditya1906]

Closes #16136
The style for select is overwritten by the Outlined style. This should solve the issue.

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

[mui-pr-bot]

Details of bundle changes.

Comparing: a36912f...4cc6d7b

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	-0.01%	+0.01% 🔺	318,937	318,919	87,547	87,557
@material-ui/core/Paper	0.00%	0.00%	68,281	68,281	20,353	20,353
@material-ui/core/Paper.esm	0.00%	0.00%	61,578	61,578	19,133	19,133
@material-ui/core/Popper	0.00%	0.00%	28,968	28,968	10,411	10,411
@material-ui/core/Textarea	0.00%	0.00%	5,513	5,513	2,374	2,374
@material-ui/core/TrapFocus	0.00%	0.00%	3,755	3,755	1,580	1,580
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,012	16,012	5,791	5,791
@material-ui/core/useMediaQuery	0.00%	0.00%	2,597	2,597	1,102	1,102
@material-ui/lab	0.00%	0.00%	140,480	140,480	43,417	43,417
@material-ui/styles	0.00%	0.00%	51,703	51,703	15,337	15,337
@material-ui/system	0.00%	0.00%	15,266	15,266	4,333	4,333
Button	0.00%	0.00%	84,273	84,273	25,630	25,630
Modal	0.00%	0.00%	20,345	20,345	6,689	6,689
Slider	0.00%	0.00%	74,587	74,587	23,184	23,184
colorManipulator	0.00%	0.00%	3,904	3,904	1,544	1,544
docs.landing	0.00%	0.00%	55,232	55,232	13,946	13,946
docs.main	+0.02% 🔺	+0.02% 🔺	650,956	651,063	205,009	205,054
packages/material-ui/build/umd/material-ui.production.min.js	-0.01%	+0.01% 🔺	292,196	292,176	83,481	83,487

Generated by 🚫 dangerJS against 4cc6d7b

[aditya1906]

Either we need to add !important. Or we may need to change the order of the styling. Either way it should work.

[aditya1906]

Let me know what you think about it. @oliviertassinari

[oliviertassinari]

I hight doubt that changing the CSS injection order within the component will be of any help. Did you confirm that it had any impact before asking for a review?

I'm trying a different strategy, something I have first discovered in #14580. I believe this is simpler. My only fear would be with the BC potential of the change. I would suspect a minimal impact, but to double check.

[aditya1906]

hight doubt that changing the CSS injection order within the component will be of any help. Did you confirm that it had any impact before asking for a review?

@oliviertassinari I have confirmed that changing the order works.

[oliviertassinari]

@aditya1906 Doesn't work on my side:

• git checkout e82bb07f859389fb4b4a66a0e4a2e6d6d70a0a91
• http://0.0.0.0:3000/components/selects/#native-select
• KO:
  

[aditya1906]

@aditya1906 Doesn't work on my side:

That is very strange.
It works for me. In the GIF it shows that it works nicely. Does it work with the changes you committed?

[oliviertassinari]

That is very strange. It works for me.

@aditya1906 e82bb07 shouldn't work in theory for the reason explained in: #16136 (comment).

[aditya1906]

Okay. So since both Select and Outline have padding right. So hence there is a conflict between the 2 values?
It does vary between browsers how they implement the padding? That is why maybe in my browser it works.

[eps1lon]

Seems like this at least a breaking change for material-table. It introduce some additional spacing:

• https://www.argos-ci.com/mui-org/material-ui/builds/49674
• master vs pr

Is this expected?

[oliviertassinari]

No, taking care of it.

[havenchyk]

@aditya1906 @oliviertassinari I see that this PR was accepted as a bugfix, but why wan't it marked as a breaking change? It changes the output DOM structure, so users will definitely notice.

[oliviertassinari]

@havenchyk One could argue that most bug fixes are breaking change, your logic might rely on it to work. I agree, it's a grey area.

[havenchyk]

@oliviertassinari From what I see, this fix solves some problem, but breaks existing user components that rely on the root class, that's a breaking change for sure. It doesn't really matter what my logic relies on, it's just logical.

Don't get me wrong, I'm not trying to say that you did something in not correct way, but I'm trying to understand your logic on why this change wasn't marked as breaking. Since changelog is generated automatically, simple note on the commit could help users to understand that upgrade can break their code.

I don't maintain opensource projects, so I might be wrong here.