[Select] Fix className overwritten

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { deepmerge } from '@material-ui/utils';
 import SelectInput from './SelectInput';
 import formControlState from '../FormControl/formControlState';
@@ -86,6 +87,7 @@ const Select = React.forwardRef(function Select(inProps, ref) {
     ...(multiple && native && variant === 'outlined' ? { notched: true } : {}),
     ref,
     ...other,
+    className: clsx(other.className, InputComponent.props.className),
   });
 });
 
@@ -112,6 +114,10 @@ Select.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

packages/material-ui/src/Select/Select.test.js

@@ -10,8 +10,9 @@ import {
   fireEvent,
   screen,
 } from 'test/utils';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme, ThemeProvider, experimentalStyled } from '@material-ui/core/styles';
 import MenuItem from '@material-ui/core/MenuItem';
+import InputBase from '@material-ui/core/InputBase';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
@@ -1184,4 +1185,12 @@ describe('<Select />', () => {
       nativeInputStyle,
     );
   });
+
+  it('styled Select with custom input should not overwritten className', () => {
+    const StyledSelect = experimentalStyled(Select)();
+    const { getByTestId } = render(
+      <StyledSelect input={<InputBase data-testid="root" className="some-classname" />} value="" />,
+    );
+    expect(getByTestId('root')).to.have.class('some-classname');
+  });
 });