MUI 5/6 边框半径在默认设置和与 theme.shape.borderRadius 一起使用时是不同的

Question

我的网站使用 Mui，在构建主题时，我将边框半径设置为

{
    palette: ...,
    shadows: ...,
    typography: ...,
    shape: {
      borderRadius: 3,
    },
  }

现在，当我直接从 MUI 导入 Button 并使用该按钮时，它在 Chrome 检查中检查了边框半径 3px。我使用 theme.shape.borderRadius 创建了另一个盒子，它更圆，边框半径：9px。

为什么两者不同，尽管它应该指的是我在主题中设置的相同值。

<Button
  variant="contained"
    sx={{
     width: "100px",
     height: "36px",
     color: "black",
     backgroundColor: "white",
    }}
>
 Start now
</Button>
<Box
 sx={{
  width: "100px",
  height: "36px",
  color: "black",
  backgroundColor: "white",
  borderRadius: (theme) => theme.shape.borderRadius,

  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  }}
 >
  Start now
</Box>

设置 px 显式有效，但这不是我想要做的。

borderRadius: (theme) => theme.shape.borderRadius+'px'

Answer 1

theme.shape.borderRadius

指定默认边框半径值（以像素为单位）

传递给组件的 prop borderRadius 告诉 主题边框半径将乘以多少

如果组件收到

borderRadius

为

number

，则将其乘以

theme.shape.borderRadius

在你的例子中，你的主题边框半径是3，盒子边框半径也是3（因为它返回主题的1），这导致3x3=9px

如果你想使用主题边框半径，你可以简单地传递 1 作为值

<Box borderRadius={1} />

这告诉 mui 你想按原样使用主题边框，而不需要回调来访问主题