'React MUI5 how to style ul items using sx

I am using Material UI 5 in a new project and I need to style an ul item.

I am trying to style the ul item using the sx prop, but it doesn't work, my code is the following:

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

what should I do?

Thanks in advance.

reactjs material-ui

Solution 1:^[1]

you should use Box component to create wrapper. check 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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Prashant Jangam

'React MUI5 how to style ul items using sx

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]