如何让 borderRadius 适用于 ToggleButtonGroup 中的 ToggleButton？

Question

我希望所有切换按钮都有圆角。

关于 ToggleButton Customization 的文档部分给出了一个示例，显示更改中间按钮的 borderLeft。 borderRadius 不起作用的最简单的重现是单击该源代码的“在 Codesandbox 中编辑”链接，然后查看 borderRadius 没有效果。

有人有可以实现这一点的 MUI 样式吗？

谢谢！

我已经通过 sx 和 styled(ToggleButton/ToggleButtonGroup) 尝试了许多不同的特异性组合，但找不到任何有效的方法。

这是我的 ToggleButton 具有的功能，而 borderRadius 不起作用。其他属性工作得很好。文档页面中的沙箱也证明大多数属性都有效，但 borderRadius 无效。

        <ToggleButton
      sx={{
        m: 0.25,
        px: 2,
        py: 0.75,
        fontSize: 14,
        fontWeight: 600,
        borderRadius: "5px",
        backgroundColor: "#F8FAFB",
        "&.Mui-selected": {
          backgroundColor: "white",
        },
      }}
      value={button}
    >
      {button}
    </ToggleButton>

Answer 1

您可以尝试使用

sx

为按钮应用道具，如下所示

const CustomToggleButton = (props) => (
  <ToggleButton
    sx={{
      borderRadius: '12px',
      '&.Mui-selected': {
        backgroundColor: '#4caf50',
        color: '#fff',
      },
    }}
    {...props}
  />
);

然后在需要显示按钮的地方像这样使用它

<ToggleButtonGroup {...props}>