[Select][material-ui] Add root class to SelectClasses

docs/pages/material-ui/api/select.json

@@ -63,6 +63,7 @@
   ],
   "styles": {
     "classes": [
+      "root",
       "select",
       "multiple",
       "filled",

docs/translations/api-docs/select/select.json

@@ -74,6 +74,7 @@
     "variant": { "description": "The variant to use." }
   },
   "classDescriptions": {
+    "root": { "description": "Styles applied to the root element." },
     "select": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the select component <code>select</code> class"

packages/mui-material/src/Select/Select.js

@@ -17,6 +17,7 @@ import styled, { rootShouldForwardProp } from '../styles/styled';
 
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
+
   return classes;
 };
 
@@ -73,6 +74,7 @@ const Select = React.forwardRef(function Select(inProps, ref) {
 
   const ownerState = { ...props, variant, classes: classesProp };
   const classes = useUtilityClasses(ownerState);
+  const { root, ...restOfClasses } = classes;
 
   const InputComponent =
     input ||
@@ -112,12 +114,12 @@ const Select = React.forwardRef(function Select(inProps, ref) {
                 SelectDisplayProps: { id, ...SelectDisplayProps },
               }),
           ...inputProps,
-          classes: inputProps ? deepmerge(classes, inputProps.classes) : classes,
+          classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses,
           ...(input ? input.props.inputProps : {}),
         },
         ...(multiple && native && variant === 'outlined' ? { notched: true } : {}),
         ref: inputComponentRef,
-        className: clsx(InputComponent.props.className, className),
+        className: clsx(InputComponent.props.className, className, classes.root),
         // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
         ...(!input && { variant }),
         ...other,

packages/mui-material/src/Select/Select.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
+import { createTheme } from '@mui/material/styles';
 
 function genericValueTest() {
   function handleChangeWithSameTypeAsSelect(event: SelectChangeEvent<number>) {}
@@ -44,4 +45,17 @@ function genericValueTest() {
 
   // disabledUnderline prop should be available (inherited from InputProps) and NOT throw typescript error
   <Select disableUnderline />;
+
+  // Tests presence of `root` class in SelectClasses
+  const theme = createTheme({
+    components: {
+      MuiSelect: {
+        styleOverrides: {
+          root: {
+            borderRadius: '8px',
+          },
+        },
+      },
+    },
+  });
 }

packages/mui-material/src/Select/selectClasses.ts

@@ -2,6 +2,8 @@ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/
 import generateUtilityClass from '../generateUtilityClass';
 
 export interface SelectClasses {
+  /** Styles applied to the root element. */
+  root: string;
   /** Styles applied to the select component `select` class. */
   select: string;
   /** Styles applied to the select component if `multiple={true}`. */
@@ -37,6 +39,7 @@ export function getSelectUtilityClasses(slot: string): string {
 }
 
 const selectClasses: SelectClasses = generateUtilityClasses('MuiSelect', [
+  'root',
   'select',
   'multiple',
   'filled',