React MUI5 how to style ul items using sx

user_339620 0
Viewed 521

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.

material-ui reactjs
2 Answers

ul is not a Mui Component but a classic jsx component, so you can attach the classic style instead i think

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

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>
user_176200660
Related