CODEWITHSUNDEEP
reactjsmaterial-ui
Oliver Watkins
Oliver Watkins

Reputation: 13539

Material-UI ListItem "flex-start" not working

I am using the Material-UI List item (https://material-ui.com/components/lists/)

And I would like to "left-justify" my items in my list item to the left. Apparantly I can do this with the flex property "flex-start" which I can set on the alignItems property of a ListItem like so :

  <List>
    <ListItem alignItems="flex-start">
      <ListItemText primary={"First Element "} />
      <ListItemText primary={" Second Element"} />
    </ListItem>
  </List>

However this does not seem to work as they are evenly spaced out when I see it in the browser.

enter image description here

Am I doing something wrong?

Upvotes: 0

Views: 1129

Answers (2)

Majid M.
Majid M.

Reputation: 4974

ListItemText has default flex: 1 1 auto; style. You need to change it like:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { List, ListItem, ListItemText } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiListItemText-root": {
      flex: "initial"
    }
  }
}));

export default function CustomStyles() {
  const classes = useStyles();
  return (
    <List classes={classes}>
      <ListItem alignItems="flex-start">
        <ListItemText primary={"First Element "} />
        <ListItemText primary={" Second Element"} />
      </ListItem>
    </List>
  );
}

Edit async-firefly-nrugg

Upvotes: 0

Shahnad S
Shahnad S

Reputation: 1167

Try this...

import { makeStyles } from '@material-ui/core/styles';
    
    const useStyles = makeStyles({
      root: {
       display:'flex',
       alignItems:'flex-start',
       flexDirection: "row"
      },
    });
    
    export default function MyComponent(props) {
      const classes = useStyles(props);
      return (
    <List className={classes.root}>
        <ListItem>
          <ListItemText primary={"First Element "} />
        </ListItem>
           <ListItem>
          <ListItemText primary={"Second Element "} />
        </ListItem>
      </List>
    
    );
    }

Upvotes: 0

Related Questions