未选择值时，如何使 MaterialUI 表单控件更宽？答案

【问题标题】：How can I make a MaterialUI form control wider when a value hasn't been selected?未选择值时，如何使 MaterialUI 表单控件更宽？
【发布时间】：2020-06-25 17:21:19
【问题描述】：

我有一个我想在下拉菜单中有一个带有某些选择的组件。不知怎么的，真的是挤在一起了，不知道怎么扩大宽度

也不确定如何更改“属性”的字体大小，尝试放置 <FormControl style={{fontSize: 12}} /> 但这不起作用

沙盒：https://codesandbox.io/s/busy-matsumoto-gpgwn

组件

    <div className={styles.attributeFields}>
      <FormControl variant="outlined">
        <InputLabel id="demo-customized-select-label">Attributes</InputLabel>
        <Select
          labelId="demo-customized-select-label"
          id="demo-customized-select"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem>ID</MenuItem>
          <MenuItem>PSA</MenuItem>
          <MenuItem>ExternalID</MenuItem>
        </Select>
      </FormControl>
    </div>

还有 CSS

.attributeFields {
  /* display: inline; */
  width: 100% !important;
  padding-top: 1.75rem !important;
  display: inline-flex !important;
  padding-left: 3% !important;
  padding-bottom: 1rem !important;
}

【问题讨论】：

您需要保存您的沙箱。它目前只有默认的“Hello CodeSandbox”内容。
另外，请在您的问题文本中包含相关代码。
现在应该保存！对不起

标签： html css reactjs typescript material-ui

【解决方案1】：

添加到固定我需要的东西

<FormControl style={{ minWidth: '45%' }} />

【讨论】：