Question

我正在尝试设置“材质UI选择”组件的宽度。为此，我必须为FormControl组件提供一个类，例如mw-120，该类链接到定义120px的min-width的CSS类。

材料UI选择组件：

<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类：

.mw-120 {
    min-width: 120px;
}

虽然我希望Select组件的大小现在最小为120px，但是渲染后该组件仍然完全相同，如下图所示。换句话说，它是狭窄的。宽度不够大。宽度应大于标签Language。

Chrome开发者工具中的元素分析显示，该组件的主要DIV元素具有包含.MuiFormControl-root-234的类min-width: 0;，并且其位置/排名高于我的{{1} }类。我猜这覆盖了我的.mw-120类，对吗？还有其他方法可以影响Material UI Select组件的宽度吗？在Material UI Select component page上没有影响此组件宽度的有用示例。

Answer 1

为了潜在的重复使用，official doc samples 使用 makeStyles 来实现这一点，如下所示：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));

然后 useStyles 生成这样的类名：

const classes = useStyles();

然后像这样添加到您的 FormControl 组件中：

<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>

Answer 2

如果您要进行一次性样式化，则可以使用内联样式，它对我有用。

<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>

如果要在更多代码中重用它并希望避免代码重复，则可能要使用Themes

Answer 3

在我们的例子中，选择器 .MuiFormControl-root 和 .mv-120 具有相同的特性，所以它们的声明顺序很重要。生成的样式最后注入页面的 <head> 部分，当自定义样式也放置在此部分时，它们的优先级较低：

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>

但是当自定义样式位于 <body> 部分时，它们优先：

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>

还有其他方法可以控制生成的 <style> 标记的位置，这些方法在 here 中有描述。

设置材料UI选择宽度？

3 个答案:

堆栈片段中的演示