[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

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { deepmerge } from '@mui/utils';
+import { deepmerge, unstable_composeClasses as composeClasses } from '@mui/utils';
 import SelectInput from './SelectInput';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
@@ -14,10 +14,16 @@ import OutlinedInput from '../OutlinedInput';
 import useThemeProps from '../styles/useThemeProps';
 import useForkRef from '../utils/useForkRef';
 import styled, { rootShouldForwardProp } from '../styles/styled';
+import { getSelectUtilityClasses } from './selectClasses';
 
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
-  return classes;
+
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getSelectUtilityClasses, classes);
 };
 
 const styledRootConfig = {
@@ -117,7 +123,7 @@ const Select = React.forwardRef(function Select(inProps, ref) {
         },
         ...(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',