[RFC] Remove `variant` prop in NativeSelect

[ZeeshanTamboli]

What's the problem? 🤔

The variant prop in the Native Select does not apply any variant related styles like for the other components, such as Select or TextField.

I see that the NativeSelect is build to have a smaller bundle size if you don't need many styles. See #20436 (comment).

Developers are getting confused as to why it is not working. See the multiple issues raised:

• NativeSelect variant option not working #36787
• MuiNativeSelect variant="outlined" doesn't work (MUI v4.9.9) #20436
• [Select] NativeSelect does not respond to the variant prop #32197

I believe that providing an alternative solution like in #32197 (comment) even though variant prop is listed in the NativeSelect API docs does not look good. The question that arises is: what is the use of the variant prop?

What are the requirements? ❓

No response

What are our options? 💡

As an alternative, have proper styles based on the variant prop.

Proposed solution 🟢

I propose simply removing the variant prop and adding the documentation on how to support the different variants by providing a custom component using the input prop. This is a breaking change, so it should be done in the next major release.

If I am not missing something, the styles applied as shown below based on the variant seem irrelevant for the variant values (standard, outlined, filled):

material-ui/packages/mui-material/src/NativeSelect/NativeSelectInput.js

Lines 57 to 70 in 0c58832

	...(ownerState.variant === 'filled' && {
	'&&&': {
	paddingRight: 32,
	},
	}),
	...(ownerState.variant === 'outlined' && {
	borderRadius: (theme.vars || theme).shape.borderRadius,
	'&:focus': {
	borderRadius: (theme.vars || theme).shape.borderRadius, // Reset the reset for Chrome style
	},
	'&&&': {
	paddingRight: 32,
	},
	}),

.

Why are there padding and border radius styles? I guess we can remove them.

Resources and benchmarks 🔗

Also raised by @cherniavskii in #20436 (comment)

Related issues:

• NativeSelect variant option not working #36787
• MuiNativeSelect variant="outlined" doesn't work (MUI v4.9.9) #20436
• [Select] NativeSelect does not respond to the variant prop #32197