使用 MUI v5 sx Prop 设置具有多个值的 CSS 属性（例如边距、边框半径等...）

【问题标题】：Using MUI v5 sx Prop to Set CSS Property with Multiple Values (e.g. margin, border-radius, etc...)使用 MUI v5 sx Prop 设置具有多个值的 CSS 属性（例如边距、边框半径等...）
【发布时间】：2022-11-02 05:30:59
【问题描述】：

有没有一种更简洁的方法来编写以下内容，利用 sx 道具对间距单位的访问？

<MUIComponent sx={{ borderRadius: '4px 8px 12px 16px' }} />

像这样的东西？

<MUIComponent sx={{ borderRadius: [1, 2, 3, 4] }} />

我在the docs 中找不到任何内容，但如果此功能不存在，我会感到惊讶...

【问题讨论】：

标签： css reactjs material-ui sx

【解决方案1】：

是的，而且你非常接近！您可以使用您的主题来设置边界半径的数量。 https://mui.com/system/getting-started/the-sx-prop/#theme-aware-properties

来自上面的文档链接：“borderRadius 属性将其接收到的值乘以 theme.shape.borderRadius 值（该值的默认值为 4px）。”

<Box sx={{ borderRadius: 2 }} />
// equivalent to borderRadius: '8px'

【讨论】：