响应MUI5如何使用sx对ul项进行样式设置

Question

我正在一个新的项目中使用材料UI 5，我需要为一个ul项目设置样式。

我试图使用ul支柱对sx项进行样式化，但它不起作用，我的代码如下所示：

<ul
  sx={{
     padding: "0 0",
     listStyle: "none",
     display: "grid",
     gap: "30px",
     gridTemplateColumns: "repeat(2, 1fr)",
 }}
>

我该怎么办？

提前谢谢。

Answer 1

ul不是一个Mui组件，而是一个经典的jsx组件，所以您可以使用经典样式来代替我的想法。

<ul
  style={{
     padding: "0 0",
     listStyle: "none",
     display: "grid",
     gap: "30px",
     gridTemplateColumns: "repeat(2, 1fr)",
 }}
>

Answer 2

您应该使用Box组件来创建包装器。检查https://mui.com/components/box/

<Box component="ul" 
  sx={{
    padding: "0 0",
    listStyle: "none",
    display: "grid",
    gap: "30px",
    gridTemplateColumns: "repeat(2, 1fr)",
  }}
>
  <Box component="li">Item 1</Box>
  <Box component="li">Item 2</Box>
</Box>