如何让输入单选元素在反应 [material-ui] 中水平对齐？

Posted 2023-02-22

【中文标题】如何让输入单选元素在反应 [material-ui] 中水平对齐？

【英文标题】：How can I get input radio elements to horizontally align in react [material-ui]?

【发布时间】：2016-02-14 07:00:09

【问题描述】：

radio 组始终在 material-ui 中垂直列出。有没有办法水平对齐它们？例如一条水平线上的所有单选按钮。

【参考方案1】：

只需使用row property:

<RadioGroup row><Radio /><Radio /></RadioGroup>

RadioGroup 继承自 FormGroup，因此FormGroup 组件的属性也可用。

另一个例子，带有标签：

<RadioGroup aria-label="anonymous" name="anonymous" value=false row>
  <FormControlLabel value="true" control=<Radio /> label="Yes" />
  <FormControlLabel value="false" control=<Radio /> label="No" />
</RadioGroup>

【讨论】：

当前选择的答案有效并且确实得到了我的支持。但是，我认为应该选择这个答案，因为它更好地与关于如何水平对齐（从中生成一行）一组子表单输入的材料 UI 文档保持一致。

我喜欢这个答案！

【参考方案2】：

连续呈现单选按钮：

<RadioButtonGroup style= display: 'flex' >

根据内容重置大小：

<RadioButton style= width: 'auto'  />

【讨论】：

如果您的单选按钮包含在 FormControlLabel 中，则不起作用。另一方面，@HydraHatRack 解决方案确实有效。

【参考方案3】：

只需在 RadioGroup 控件上添加道具 row=true。

 <RadioGroup
      aria-label="Location"
      name="location"
      className=classes.group
      value=location
      onChange=handleChange
      row=true
      >
         <FormControlLabel value="company" control=<Radio /> label="Company" />
         <FormControlLabel value="home" control=<Radio /> label="Home" />
         <FormControlLabel value="other" control=<Radio /> label="Other" />
 </RadioGroup>

【讨论】：

这与我上面的回答基本相同。 只是将 JSX 简写用于布尔属性。

【参考方案4】：

对于那些还在挣扎的人，使用这种风格：

const styles = theme => (
    group: 
        width: 'auto',
        height: 'auto',
        display: 'flex',
        flexWrap: 'nowrap',
        flexDirection: 'row',
    
);

class MyComponent extends React.Component 

    render() 
        const  classes  = this.props;

        <RadioGroup className=classes.group ...>
    

;

export default withStyles(styles)(MyComponent);

【讨论】：

谢谢！像魅力一样工作！

可以使用row property时不必要的复杂和脆弱。

【参考方案5】：

您只需在<RadioGroup> 中提及row。 您可以这样编写代码：

      <FormControl component="fieldset">
        <FormLabel >Lable</FormLabel>
        <RadioGroup aria-label="overall_sal" name="Overall SAL" value=value onChange=handleChange row>
          <FormControlLabel value="low" control=<Radio /> label="Low" />
        </RadioGroup>
      </FormControl>

【讨论】：

像杰伊一样工作！

【参考方案6】：

我还不能发表评论，但要补充一下@lambdakris 所说的话： 您可能还需要添加 flexDirection: 'row'。进行这些更改而不是使用内联样式的最简单方法是将您的 css 添加到 material-ui 已经使用的样式对象和类中。

const styled = theme => (
 formControl: 
                margin: theme.spacing.unit * 3,
                width: "100%", //parent of radio group
              ,
       group: 
               flexDirection: 'row',
               justifyContent: 'space-around',
               
             );
...........
<RadioButtonGroup className=classes.group>

【讨论】：

无需复杂化 flex。使用row prop。