有没有一种更简洁的方式来编写下面的代码，利用sx prop对间距单位的访问？
<MUIComponent sx={{ borderRadius: '4px 8px 12px 16px' }} />
像这样的东西？
<MUIComponent sx={{ borderRadius: [1, 2, 3, 4] }} />
我在the docs中找不到任何东西，但如果这个功能不存在，我会感到惊讶...
deyfvvtc1#
是的，你已经很接近了！你可以使用你的主题来设置borderRadius的数量。https://mui.com/system/getting-started/the-sx-prop/#theme-aware-properties从上面的文档链接：“borderRadius属性将收到的值乘以theme.shape.borderRadius值（此值的默认值为4px）。”
theme.shape.borderRadius
<Box sx={{ borderRadius: 2 }} /> // equivalent to borderRadius: '8px'
要为上、左等添加多个边框，请执行以下操作：https://mui.com/system/borders/#additive或者您可以将主题导入到组件中并使用主题。spacing（https：//mui.com/material-ui/customization/spacing/#custom-spacing）：
<MUIComponent sx={{ borderRadius: theme.spacing(1, 2, 3, 4) }} />
1条答案
按热度按时间deyfvvtc1#
是的，你已经很接近了！你可以使用你的主题来设置borderRadius的数量。https://mui.com/system/getting-started/the-sx-prop/#theme-aware-properties
从上面的文档链接：“borderRadius属性将收到的值乘以
theme.shape.borderRadius值（此值的默认值为4px）。”要为上、左等添加多个边框，请执行以下操作：https://mui.com/system/borders/#additive
或者您可以将主题导入到组件中并使用主题。spacing（https：//mui.com/material-ui/customization/spacing/#custom-spacing）：