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
.
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 .
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>
If you would reuse it in more code and want to avoid code duplication, you will probably want to work with Themes
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}>
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>
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/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>
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/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> <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 .
In MUI v5 you can use the sx
prop. Note that the example below uses a select TextField
which is essentially the same as Select
except that it can display the label and the helper text. See this answer for more detail about how TextField
works.
<TextField select label="Select" sx={{ minWidth: 130 }}>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.