Nativeselect InputBase styling.

[bemineni]

How to apply style to NativeSelect InputBase CSS ? when we follow the example https://material-ui.com/demos/text-fields/#customized-inputs to create a bootstrap input, the same changes need to be applied to create other control element like NativeSelect.

When I try to give the same styling to a nativeselect, the root styling applies to MUINativeSelect-root instead of MUIInputBase-root

https://codesandbox.io/s/8kpjm8nvp8

[oliviertassinari]

@bemineni What do you think of this diff. The idea is to take the styled input based and to provide it as an input property to the select component:

-------------- docs/src/pages/demos/selects/CustomizedSelects.js --------------
new file mode 100644
index 000000000..b3f7eea5a
@@ -0,0 +1,133 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import NativeSelect from '@material-ui/core/NativeSelect';
+import InputBase from '@material-ui/core/InputBase';
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  margin: {
+    margin: theme.spacing.unit,
+  },
+  bootstrapRoot: {
+    'label + &': {
+      marginTop: theme.spacing.unit * 3,
+    },
+  },
+  bootstrapInput: {
+    borderRadius: 4,
+    backgroundColor: theme.palette.common.white,
+    border: '1px solid #ced4da',
+    fontSize: 16,
+    width: 'auto',
+    padding: '10px 26px 10px 12px',
+    transition: theme.transitions.create(['border-color', 'box-shadow']),
+    // Use the system font instead of the default Roboto font.
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    '&:focus': {
+      borderRadius: 4,
+      borderColor: '#80bdff',
+      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+    },
+  },
+  bootstrapFormLabel: {
+    fontSize: 18,
+  },
+});
+
+class CustomizedSelects extends React.Component {
+  state = {
+    age: '',
+  };
+
+  handleChange = event => {
+    this.setState({ age: event.target.value });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <form className={classes.root} autoComplete="off">
+        <FormControl className={classes.margin}>
+          <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
+            Age
+          </InputLabel>
+          <Select
+            value={this.state.age}
+            onChange={this.handleChange}
+            inputProps={{
+              name: 'age',
+              id: 'age-customized-select',
+            }}
+            input={
+              <InputBase
+                classes={{
+                  root: classes.bootstrapRoot,
+                  input: classes.bootstrapInput,
+                }}
+              />
+            }
+          >
+            <MenuItem value="">
+              <em>None</em>
+            </MenuItem>
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+        </FormControl>
+        <FormControl className={classes.margin}>
+          <InputLabel htmlFor="age-customized-native-simple" className={classes.bootstrapFormLabel}>
+            Age
+          </InputLabel>
+          <NativeSelect
+            value={this.state.age}
+            onChange={this.handleChange}
+            inputProps={{
+              name: 'age',
+              id: 'age-customized-native-simple',
+            }}
+            input={
+              <InputBase
+                classes={{
+                  root: classes.bootstrapRoot,
+                  input: classes.bootstrapInput,
+                }}
+              />
+            }
+          >
+            <option value="" />
+            <option value={10}>Ten</option>
+            <option value={20}>Twenty</option>
+            <option value={30}>Thirty</option>
+          </NativeSelect>
+        </FormControl>
+      </form>
+    );
+  }
+}
+
+CustomizedSelects.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedSelects);

------------------- docs/src/pages/demos/selects/selects.md -------------------
index 09472a842..379666067 100644
@@ -20,6 +20,15 @@ we allow such pattern.
 
 {{"demo": "pages/demos/selects/NativeSelects.js"}}
 
+## Customized selects
+
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in, here's an example of how you can change the main color of an Input.
+
+⚠️ While the material design specification encourages theming, these examples are off the beaten path.
+
+{{"demo": "pages/demos/selects/CustomizedSelects.js"}}
+
 ## Multiple Select
 
 The `Select` component can handle multiple selections.

------------- docs/src/pages/demos/text-fields/CustomizedInputs.js -------------
index e9f69110c..42f7f71b3 100644
@@ -10,7 +10,7 @@ import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
 
 const styles = theme => ({
-  container: {
+  root: {
     display: 'flex',
     flexWrap: 'wrap',
   },
@@ -80,7 +80,7 @@ function CustomizedInputs(props) {
   const { classes } = props;
 
   return (
-    <div className={classes.container}>
+    <div className={classes.root}>
       <FormControl className={classes.margin}>
         <InputLabel
           htmlFor="custom-css-standard-input"

[oliviertassinari]

Do you want to submit a pull-request with these changes?

[bemineni]

Do you want me to do these changes in next, master ?