ReactJS 水平对齐 material-ui 元素

Question

我正在尝试在文本输入旁边添加一个单选按钮，这样用户基本上可以输入 "answers" 问题并标记一个首选。但是，Material-UI 将每个放在自己的行上。

这是我目前拥有的：

<div>
   <RadioButton
      value="light"
   />
   <TextInput
       hintText="Answer"
       multiLine = {true}
   />
</div>

Answer 1

您有一个 style 对象可用于覆盖 Material-Ui 中元素的默认样式。使用它并将显示设置为内联块。

display: inline-block;

Answer 2

我正在使用 react-inline-grid 进行布局 material-ui，它有助于解决许多问题并使代码更明确地说明布局（加上它是反应式的）。

<Grid>
  <Row is="nospace start">
    <Cell is="9 tablet-6 phone-3">
       <TextField ... />
    </Cell>
    <Cell is="middle 3 tablet-2 phone-1">
       <RaisedButton ... />
    </Cell>
  </Row>
</Grid>

Answer 3

仅作记录，我设法使用 flexboxgrid 对齐单选按钮...做了这样的事情：

      <div className="row">
        <div className="col-md-2">
          Type:
        </div>
        <div className="col-md-10">
          <RadioButtonGroup
             className="row"
             name="type">
            <RadioButton
               className="col-md-4"
               value="other"
               label="Other" />
            <RadioButton
               className="col-md-4"
               value="custom"
               label="Custom" />
          </RadioButtonGroup>
        </div>
      </div>

ReactJS 水平对齐 material-ui 元素

ReactJS align material-ui elements horizontally

css

reactjs

material-ui