CODEWITHSUNDEEP
reactjsmaterial-ui
Mackie Messer
Mackie Messer

Reputation: 1328

Horizontally Align Primary/Secondary ListItemText, Material UI?

I want the primary and secondary text within a ListItemText to both be center-aligned, unlike the question here.

However, after trying alignItems, alignContent, alignSelf, and primaryTypographyProps={{ align: "center" }}, I am stumped.

What's the correct way to go about this?

Upvotes: 2

Views: 2559

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81096

Below is an example with center-aligned text.

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

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  }
}));

const CenteredListItemText = withStyles({
  root: {
    textAlign: "center"
  }
})(ListItemText);

export default function SimpleList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItem button>
          <CenteredListItemText primary="Inbox" secondary="Inbox secondary" />
        </ListItem>
        <ListItem button>
          <CenteredListItemText primary="Drafts" secondary="Drafts secondary" />
        </ListItem>
      </List>
    </div>
  );
}

Edit Centered ListItemText

Upvotes: 1

Related Questions