我试图在文本输入旁边有一个单选按钮，因此基本上用户可以输入问题的“答案”并标记一个首选。但是，Material-UI 将每个都放在自己的行上。
这是我目前拥有的：
<div>
<RadioButton
value="light"
/>
<TextInput
hintText="Answer"
multiLine = {true}
/>
</div>
ReactJS 水平对齐 material-ui 元素
IT技术
css
reactjs
material-ui
2021-05-08 07:17:22
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>
我正在使用react-inline-grid与 material-ui 进行布局，它有助于解决许多问题并使代码关于布局更加明确（而且它是react性的）。
<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>
您有一个style 对象可用于覆盖 Material-Ui 中元素的默认样式。使用它并将显示设置为内联块。
display: inline-block;