Блог

Я хочу достичь заданного стиля.

В настоящее время у меня есть

 <Box display="flex" flexDirection="row" alignItems="center" width={1}>
<Box flexGrow="1">
    <Typography variant="h6">
        {subscription.PlanName}
        <Box
            px={1}
            py={0.5}
            color={"primary.contrastText"}
            className={classes.success}
            display="flex"
            alignItems="center"
            justifyContent="space-between"
        >
            {subscription.Status}
        </Box>
    </Typography>
    <Typography variant="caption" component="div">Purchased on: <b>{moment(subscription.StartDate).format("DD-MM-YYYY")}</b></Typography>
    <Typography variant="caption" component="div">Expiring on: <b>{moment(subscription.EndDate).format("DD-MM-YYYY")}</b></Typography>
</Box>
<Box>
    <Button
        variant="outlined"
        color="primary"
        onClick={Actions.openBillingDrawer}>
        UPDATE CREDITS
    </Button>
</Box>
<Box>
    <Button
        variant="contained"
        color="primary"
        onClick={Actions.openBillingDrawer}>
        UPGRADE PLAN
    </Button>
</Box>
  

Кроме того, кнопка ОБНОВИТЬ КРЕДИТЫ отличается от той, которую я использую в настоящее время. Пожалуйста, укажите правильную кнопку и для этого.

это не совсем ваша цель, но это хорошее место для начала. У вас есть правильное разделение блоков, правильный размер зеленого поля и кнопка IconButton:

 <Box
  display="flex"
  flexDirection="row"
  alignItems="center"
  width={1}
  justifyContent="space-between"
>
  <Box>
    <Box display="flex" alignItems="flex-end" margin="5px 0">
      <Typography variant="h4" style={{ lineHeight: "0.8" }}>
        Basic Plan
      </Typography>
      <Box
        color="primary.contrastText"
        bgcolor="success.main"
        fontSize="8px"
        padding="2px 4px"
        marginLeft="6px"
      >
        ACTIVE
      </Box>
    </Box>
    <Typography variant="caption" component="div" color="textSecondary">
      Purchased on: <b>01-01-2020</b>
    </Typography>
    <Typography variant="caption" component="div" color="textSecondary">
      Expiring on: <b>02-02-2020</b>
    </Typography>
  </Box>
  <Box>
    <Button
      variant="outlined"
      color="primary"
      endIcon={<ArrowDropDownIcon />}
    >
      UPDATE CREDITS
    </Button>
    <Button variant="contained" color="primary">
      UPGRADE PLAN
    </Button>
  </Box>
</Box>