CODEWITHSUNDEEP
reactjsmaterial-uilistitem
ganjelo
ganjelo

Reputation: 5

Change the min-width in Listitem and ListItemIcon on React MaterialUI

I want to change the minWidth of the ListItemIcon: space between the ListItemIcon and ListItemText

This is I want to achieve: What I want

But this is what I achieve: the ListItemIcon is in the center

This is what I tried to do:

return (
<ListItem
  component="li"
  sx={{
    padding: 0,
  }}
>
  <Link
    to={linkTo}
    style={{
      textDecoration: "none",
      color: "inherit",
      width: "100%",
      padding: "16px",
      display: "flex",
      alignItems: "center",
    }}
  >
    <ListItemIcon>
      <Icon
        sx={{
          color: isActive ? "black" : `${color}`, // Cambia il colore se attivo
          stroke: isActive ? "black" : `${color}`,
          strokeWidth: `${strokeWidth}`,
          // minWidth: "1", // <-- UNCOMMENT THIS
        }}
      />
    </ListItemIcon>
    <ListItemText
      disableTypography
      primary={
        <Typography
          variant="body2"
          style={{
            color: isActive ? "black" : `${color}`, // Cambia il colore se attivo
            fontWeight: isActive ? "700" : fontWeight, // Aggiungi il grassetto se attivo
            fontSize: "1.3em",
          }}
        >
          {text}
        </Typography>
      }
    />
  </Link>
</ListItem>);

EDIT: The "Icon" type is

React.ElementType<SvgIconProps>

Upvotes: 0

Views: 39

Answers (1)

hokwanhung
hokwanhung

Reputation: 647

With the images provided, your <ListItemIcon> seems to have set its content to center by default. Try changing it to:

<ListItemIcon sx={{ justifyContent: "start" }}>
  {/* ...Icon Content */}
</ListItemIcon>

By default, the ListItemIcon should have set its display to inline-flex, so manually assigning justify-content would be effective.

Let me know if it works.

Upvotes: 0

Related Questions