具有“轮廓”变体的 Material-UI 单选按钮

【问题标题】：Material-UI radio buttons with "outlined" variant具有“轮廓”变体的 Material-UI 单选按钮
【发布时间】：2021-05-22 12:30:50
【问题描述】：

我找不到显示带有来自FormControl 的“轮廓”变体的单选按钮的方法。使用 React 和 MaterialUI 创建注释表单。

例子：

如上图所示，单选按钮字段与其他字段不匹配。
简单地将variant="outlined" 添加到 FormControl 是行不通的。

我想知道这是否可能。
WBR

【问题讨论】：

在 stackoverflow here 上找到了完美的解决方案。

标签： reactjs annotations material-ui

【解决方案1】：

我的解决方案是使用这样的字段集：

<Grid item component='fieldset' className={classes.outlined}>
   <FormLabel component="legend">Title</FormLabel>
... radio buttons ..
</Grid>

然后使用主题设置文字的颜色等。

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    outlined: {
      borderWidth: 1,
      borderColor: theme.palette.grey[300],
      borderStyle: 'solid',
      borderRadius: 3
    },
  }),
);

【讨论】：