材质 UI 输入对齐到选择

Posted 2023-02-22

【中文标题】材质 UI 输入对齐到选择

【英文标题】：Material UI Input aligned to Select

【发布时间】：2018-09-21 09:58:56

【问题描述】：

我的元素在 Material UI 上的对齐方式存在一些问题。

这是我的 Input 和 Select 元素的代码：

<div>
    <form>
       <TextField 
         label="Search" 
       />
       <FormControl>
          <InputLabel htmlFor="age-simple">Age</InputLabel>
              <Select
                 value=""
                 onChange=""
                 inputProps=
               >
                 <MenuItem value="">
                     <em>None</em>
                     </MenuItem>
                     <MenuItem value=10>Ten</MenuItem>
                     <MenuItem value=20>Twenty</MenuItem>
                     <MenuItem value=30>Thirty</MenuItem>
               </Select>
        </FormControl>
     </form>
</div>

这是我得到的输出：

【参考方案1】：

您可以使用 flexbox 对齐多个表单域。您只需将display: flex 添加到父元素。在下面的示例中，我使用了内联样式，但您可以使用任何the supported style solutions。

您的代码中还有一个错误：inputProps= 缺少右括号：

const  React, ReactDOM  = window
const  InputLabel, FormControl, TextField, MenuItem, Select  = window['material-ui']

const Form = () => (
  <form style= display: 'flex' >
    <TextField label="search" />
    <FormControl>
      <InputLabel htmlFor="age-simple">Age</InputLabel>
      <Select value="">
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value=10>Ten</MenuItem>
        <MenuItem value=20>Twenty</MenuItem>
        <MenuItem value=30>Thirty</MenuItem>
      </Select>
    </FormControl>
  </form>
)

ReactDOM.render(<Form />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script><script src="https://unpkg.com/material-ui@1.0.0-beta.40/umd/material-ui.production.min.js"></script><div id="root"></div>

【讨论】：

这没关系，但是表单不再响应。