CODEWITHSUNDEEP
reactjsmaterial-ui
Fabio Rotondo
Fabio Rotondo

Reputation: 400

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.

Upvotes: 1

Views: 2115

Answers (2)

Prashant Jangam
Prashant Jangam

Reputation: 2858

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>

Upvotes: 2

Johan Petrikovsky
Johan Petrikovsky

Reputation: 130

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)",
 }}
>

Upvotes: 3

Related Questions