CODEWITHSUNDEEP
reactjsmaterial-ui
Ayaan Momin
Ayaan Momin

Reputation: 101

Material-UI for react, how layout Card component to align texts

So essentially I want to accomplish this block I designed in Adobe XD.

Adobe XD card design

Adobe XD card design

Here is my code to implement the following:

const useStyles = makeStyles({
  root: {
    minWidth: 275,
    maxWidth: 300
  },

  title: {
    fontSize: 14
  },
  pos: {
    marginBottom: 5
  }
});

export default function SimpleCard() {
  const classes = useStyles();
  const bull = <span className={classes.bullet}>•</span>;

  return (
    <Card className={classes.root}>
      <CardContent>
        <Typography
          className={classes.title}
          color="textSecondary"
          display="inline"
        >
          Physics
        </Typography>
        <Typography display="inline" align="right" style={{ marginLeft: 110 }}>
          benevolent
        </Typography>

        <Typography variant="body2" component="p" align="left">
          10/25/2001
        </Typography>
      </CardContent>
    </Card>
  );
}

Here is the codepen link: https://codesandbox.io/embed/material-demo-bi3sm?fontsize=14&hidenavigation=1&theme=dark

The problem with this is that in the first line I have to manually set the distance between the two typography tags. So basically the distance between Physics and Benevolence is set manually. How can I automatically determine that distance? Also How can I get closer to my design?

Upvotes: 0

Views: 1225

Answers (2)

Matti Greff
Matti Greff

Reputation: 238

Flex box can accomplish what you want easily, with the following class:

const useStyles = makeStyles({
  header: {
    display: "flex",
    justifyContent: "space-between"
  }
});

And if you use a div to wrap the typography:

  <div className={classes.header}>
    <Typography
      className={classes.title}
      color="textSecondary"
      display="inline"
    >
      Physics
    </Typography>
    <Typography display="inline" align="right">
      benevolent
    </Typography>
  </div>
  ...

Then it accomplishes what you want.

Upvotes: 1

coddingtonjoel
coddingtonjoel

Reputation: 198

Have you tried using flexbox? You could put each line in a div and use justify-content with the different "between" options. This would put a set distance between each depending on which option you choose.

These might be the best two options:

justify-content: space-between;

justify-content: space-around;

Also using align-items: center might be good for centering them vertically.

If this doesn't work directly, you might wanna try adding !important to the new CSS code because I know Material-UI is fussy about styling.

Upvotes: 1

Related Questions