MUI：如何使用 sx 属性设置 <p> 的样式？

Question

使用 MUI v5 的样式系统时，当您编写时

<Box sx={{
    p : {
        marginBottom: '6px'
    }
}}> 
    <p>My Text</p> </Box>

那么这不会转化为具有底部边距的 <p> 元素，因为 p 用作 padding 的 shorthand，请参见此处：https://mui.com/system/properties/#legend

那么我应该如何设置段落的样式？使用类定位是这里唯一的选择吗？

Answer 1

你只需要做这样的事情

<Box sx={{
 '& > p': {
          marginBottom: '6px'
        }
 
}}> 
    <p>My Text</p> 
</Box>

MUI: how to style a <p> using sx prop?