reactjs - Material UI 输入与选择对齐

Question

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

这是我的输入和选择元素的代码:

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

这是我得到的输出:

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