css 设置材质UI选择宽度？

gpfsuwkq 于 2023-05-19 发布在其他

关注(0)|答案(4)|浏览(454)

我正在尝试设置Material UI Select组件的宽度。为此，我必须为FormControl组件提供一个类，例如mw-120，它链接到定义120 px的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组件的大小现在至少有120 px的宽度，但该组件在渲染后保持完全相同，如下图所示。换句话说，就是缩小。宽度不够大。宽度应大于标签Language。

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

css

来源：https://stackoverflow.com/questions/56120213/set-material-ui-select-width

4条答案

按热度按时间

wixjitnu1#

如果你正在做一些一次性的样式，你可以使用内联样式，它对我很有效。

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

赞(0）回复(0）举报 2023-05-19

hs1rzwqc2#

为了潜在的重用，官方文档示例使用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}>

Stack Snippets中的Demo

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>

赞(0）回复(0）举报 2023-05-19

qgelzfjb3#

材质界面v5**中可以使用sx prop 。请注意，下面的示例使用了一个select TextField，它与Select基本相同，只是它可以显示标签和帮助器文本。有关TextField如何工作的更多详细信息，请参阅this答案。

<TextField select label="Select" sx={{ minWidth: 130 }}>
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

赞(0）回复(0）举报 2023-05-19

gjmwrych4#

在我们的例子中，选择器.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>标记的放置，这里将介绍这些方法。

赞(0）回复(0）举报 2023-05-19

我来回答

css 设置材质UI选择宽度？

4条答案

Stack Snippets中的Demo

相关问题

热门标签

最新问答