For potential re-use, the [official doc samples][1] accomplish this with [`makeStyles`][2] like this:

```js
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));
```

Then `useStyles` generates class names like this:

```js
const classes = useStyles();
```

Then add to your `FormControl` component like this:

```jsx
<FormControl className={classes.formControl}>
```

### Demo in Stack Snippets





    const { FormControl, InputLabel, Select, MenuItem, makeStyles } = MaterialUI;

    const App = function () {

      const useStyles = makeStyles((theme) => ({
        formControl: {
          margin: theme.spacing(1),
          minWidth: 120,
        },
      }));

      const classes = useStyles();

      return (
        <div className="App">
          <FormControl className={classes.formControl}>
            <InputLabel id="demo-simple-select-label">Age</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              value={''}
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>
        </div>
      )
    }

    ReactDOM.render(
       <App />,
       document.getElementById('root')
    );



    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@material-ui/core@4.11.3/umd/material-ui.development.js"></script>

    <div id="root"></div>



[1]: https://github.com/mui-org/material-ui/blob/v4.11.3/docs/src/pages/components/selects/SimpleSelect.js#L9-L29
[2]: https://material-ui.com/styles/advanced/#makestyles

I am trying to set the MUI `Select` component's width. For this I have to provide a class to the `FormControl` component, such as `mw-120` which links to a CSS class defining the `min-width` of 120px.

Material UI Select component:

    <FormControl className='mw-120'>
        <InputLabel htmlFor='selected-language'>Language</InputLabel>
        <Select value={this.state.selectedLanguage}
                onChange={(e) => this.onLanguageChange(e.target.value)}
                inputProps={{
                    name: 'language',
                    id: 'selected-language',
                }}>
            {menuItems}
        </Select>
    </FormControl>

CSS class:

    .mw-120 {
        min-width: 120px;
    }

While I would expect the size of the `Select` component to now have a width of 120px minimum, the component remains exactly the same after rendering, as shown in the following picture. In other words, it is to narrow. The width is not big enough. The width should be greater than the label `Language`.

[![width of Select component too small][1]][1]

An element analysis within the Chrome Developer Tools has shown that the main DIV element of that component has a class `.MuiFormControl-root-234` that contains `min-width: 0;`, and it is located/ranked higher than my `.mw-120` class. I guess this overrides my `.mw-120` class, right? Is there any other way to influence the width of the Material UI Select component? There are no helpful examples of influencing the width of this component on the [Material UI Select component page][2].


  [1]: https://i.stack.imgur.com/aRmEJ.png
  [2]: https://material-ui.com/demos/selects/

Set MUI Select width?

Another approach outlined in the [**Docs > Themes > Globals**][1] section:

> If you are using the [`CssBaseline`][2] component to apply global resets, it can also be used to apply global styles. 

Here's an example:

```ts
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      "@global": {
        body: {
          backgroundColor: "tomato"
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    </ThemeProvider>
  );
}
```

### [Demo in CodeSandBox][3] and Stack Snippets





    const { ThemeProvider, createMuiTheme, CssBaseline } = MaterialUI

    const theme = createMuiTheme({
      overrides: {
        MuiCssBaseline: {
          "@global": {
            body: {
              backgroundColor: "tomato",
            },
          },
        },
      },
    })

    const App = () => {
      return (
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <div className="App">
            <h1>Hello CodeSandbox</h1>
          </div>
        </ThemeProvider>
      )
    }

    ReactDOM.render(<App />, document.getElementById("root"))




    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>

    <div id="root"></div>



### Update for MUI 5

Create your theme like this:

```ts
import { createTheme } from "@mui/material";

export const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          backgroundColor: "tomato"
        }
      }
    }
  }
});
```


**Further Reading**: [Global Styles with React and Material UI][4]

[1]: https://material-ui.com/customization/globals/#global-css
[2]: https://material-ui.com/components/css-baseline/
[3]: https://codesandbox.io/s/material-ui-global-styles-xm4p9
[4]: https://stackoverflow.com/q/58755118/1366033

I can't find any way to target root elements with the `ThemeProvider` from MUI.

    const theme = createMuiTheme({
      palette: {
        background: {
          default: "#00000",
          backgroundColor : 'black',
          backgroundImage: 'url(/bg.jpg)',
          backgroundPosition: 'center',
          height:'100%'
        },
        primary: {
          light: '#757ce8',
          main: '#fff',
          dark: '#002884',
          contrastText: 'grey',
        },
      },
    });

