Set Material UI Select width?

20
votes

I am trying to set the Material UI 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

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.

3
htmlcssreactjsmaterial-designmaterial-ui
Your class isn't working because it is higher in the compiled css file. Right solution is to make sure you new class is lower in that file. Or use inline styles and !important if your don't care about your project. – Arseniy-II
You might want to read this section of the mui docs? material-ui.com/customization/components/… – Hans Spieß

3 Answers

28
votes

If you are doing something a one-off styling, you can use the inline style, it worked for me.

<FormControl style={{minWidth: 120}}> // this line
    <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>

enter image description here

If you would reuse it in more code and want to avoid code duplication, you will probably want to work with Themes

3
votes

For potential re-use, the official doc samples accomplish this with makeStyles like this:

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:

const classes = useStyles();

Then add to your FormControl component like this:

<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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js"></script>

<div id="root"></div>
0
votes

In our case selectors .MuiFormControl-root and .mv-120 have the same specificity, so the order in which they are declared matters. Generated styles are injected last in the <head> section of the page, and when custom styles are also placed in this section, they have a lower priority:

const { FormControl, InputLabel, Select, MenuItem } = MaterialUI

const App = function () {
    return (<FormControl className="mw-120">
        <InputLabel id="language-label">Language</InputLabel>
        <Select
            labelId="language-label"
            id="language"
            value="">
            <MenuItem value={"en"}>English</MenuItem>
            <MenuItem value={"de"}>German</MenuItem>
            <MenuItem value={"ru"}>Russian</MenuItem>
        </Select>
    </FormControl>)
}

ReactDOM.render(<App />, document.getElementById('root'))
.mw-120 {
    min-width: 120px;
}
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js"></script>
    
<div id="root"></div>

But when custom styles are in the <body> section, they take precedence:

const { FormControl, InputLabel, Select, MenuItem } = MaterialUI

const App = function () {
    return (<FormControl className="mw-120">
        <InputLabel id="language-label">Language</InputLabel>
        <Select
            labelId="language-label"
            id="language"
            value="">
            <MenuItem value={"en"}>English</MenuItem>
            <MenuItem value={"de"}>German</MenuItem>
            <MenuItem value={"ru"}>Russian</MenuItem>
        </Select>
    </FormControl>)
}

ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js"></script>

<style>
  .mw-120 {
    min-width: 120px;
  }
</style>

<div id="root"></div>

There are other methods to control the placement of generated <style> tags, which are described here.