Материал-интерфейс для реагирования, как макет карты компонента для выравнивания текста

Question

Итак, по сути, я хочу выполнить sh этот блок, который я разработал в Adobe XD.

Дизайн карты Adobe XD

Вот мой код реализовать следующее:

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>
  );
}

Вот ссылка на кодовый блок: https://codesandbox.io/embed/material-demo-bi3sm?fontsize=14&hidenavigation=1&theme=dark

Проблема в том, что в первой строке мне нужно вручную установить расстояние между двумя типографскими тегами. Таким образом, в основном расстояние между физикой и благотворительностью устанавливается вручную. Как я могу автоматически определить это расстояние? Также Как я могу приблизиться к своему дизайну?

Answer 1

Flex box может выполнить все, что вы хотите sh легко, с помощью следующего класса:

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

И если вы используете div для переноса типографии:

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

Тогда это выполняет то, что вы хотите.

Answer 2

Вы пробовали использовать flexbox? Вы можете поместить каждую строку в div и использовать justify-content с различными опциями «Между». Это установило бы установленное расстояние между каждым в зависимости от того, какую опцию вы выберете.

Это могут быть лучшие два варианта:

justify-content: space-between;

justify-content: space-around;

Также использование align-items: center может быть полезно для их центрирования по вертикали .

Если это не сработает напрямую, вы можете попробовать добавить !important к новому коду CSS, потому что я знаю, что Material-UI суетливо относится к стилю.