reactjs - 具有 "outlined"变体的 Material-UI 单选按钮

Question

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

例子:

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

我想知道这是否可能。
世界银行

Answer 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
    },
  }),
);