ReactJS水平對齊材料-ui元素

Question

我試圖在文本輸入旁邊有一個單選按鈕，因此用戶基本上可以輸入問題的“答案”並標記一個首選項。 但是，Material-UI會將每個內容放在自己的行上。

這就是我目前擁有的：

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

Answer 1

我正在使用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 2

只是為了記錄，我設法使用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>

Answer 3

您有一個style對象可以覆蓋Material-Ui中元素的默認樣式。 使用它並將顯示設置為內聯塊。

display: inline-block;