MUI主题设置borderRadius后Button与Box组件圆角不一致问题

问题根源在于MUI对两种场景下的数值解析规则不一样：

• Button组件的内置样式逻辑，会直接将theme.shape.borderRadius的数值当作像素单位来渲染，所以你配置的3会被解析成3px。
• 而在Box的sx属性中，当你给borderRadius传递纯数字时，MUI会把这个数字视为theme.shape.borderRadius的倍数。你的主题里shape.borderRadius=3，所以最终计算为 3 * 3 = 9px，这就是为什么Box显示9px圆角。

要实现两者圆角一致，又不想手动拼接px后缀的话，推荐这样写：

borderRadius: (theme) => `${theme.shape.borderRadius}px`

这种写法能和主题配置保持联动，后续修改shape.borderRadius时，所有引用的地方都会自动同步。

如果你嫌麻烦，也可以直接在sx里用字符串形式的数值：

borderRadius: "3"

但这种方式硬编码了数值，后续修改主题时需要手动更新，不如前者灵活。

内容的提问来源于stack exchange，提问作者talha_ah