Блог

В настоящее время я работаю над одним проектом, и я застрял на проблеме стиля. Я использую react.js со стилизованными компонентами. У меня есть разные карточки счетов внутри списка, и содержание каждой из них зависит от данных, которые поступают из JSON. Моя проблема заключается в интервале, так как содержимое элементов карты может отличаться, я не могу назначить им фиксированное поле; если я это сделаю, я получу что-то вроде этой ссылки на изображение проблемы вместо того, что должно быть. Как вы можете видеть в дизайне, они должны быть на одном уровне. Когда я добавляю минимальную ширину к идентификатору, имени и дате, у меня возникает еще одна проблема с расстоянием между именем и ценой. Это мой код в этом компоненте.

 import React from "react";
import styled from "styled-components";
import { ReactComponent as RightIcon } from "../../../images/icon-arrow-right.svg";
import data from "../data/invoices.json";

const InvoiceCardComponent = styled.li`
  font-size: 1.2rem;
  line-height: 1.5rem;
  padding: 1.6rem 3.2rem;
  box-shadow: 0px 10px 10px -10px rgba(72, 84, 159, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background-color: ${({ theme }) => theme.colors.white};
  amp;:not(:last-child) {
    margin-bottom: 1.6rem;
  }
`;

const Id = styled.p`
  font-weight: 700;
  margin-right: 4.3rem;
`;

const HashTag = styled.span`
  color: ${({ theme }) => theme.colors.shipCove};
`;

const Date = styled.p`
  color: ${({ theme }) => theme.colors.baliHai};
  margin-right: 4.5rem;
`;

const Time = styled.time``;

const Name = styled.p`
  color: ${({ theme }) => theme.colors.baliHai};
`;

const Price = styled.p`
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-right: 4rem;
`;

const Status = styled.p`
  margin-right: 2rem;
  font-weight: 700;
  color: ${({ theme }) => theme.colors.success};
  text-transform: capitalize;
  display: flex;
  align-items: center;
  background-color: ${({ theme }) => theme.colors.lightSuccess};
  min-width: 10.4rem;
  padding: 1.3rem 0;
  display: inline-flex;
  justify-content: center;
  border-radius: 6px;
`;

const UserInfo = styled.div`
  display: flex;
`;

const PaymentInfo = styled.div`
  display: flex;
  align-items: center;
`;

const StatusIcon = styled.span`
  display: inline-block;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  background-color: ${({ theme }) => theme.colors.success};
  margin-right: 8px;
`;

const InvoiceCard = () => {
  const renderInvoices = data.map((invoice) => {
    const date = new window.Date(invoice.paymentDue);
    const month = date.toLocaleString("en-US", { month: "short" });
    const day = date.getDate();
    const year = date.getFullYear();
    const formattedTotal = invoice.total.toLocaleString("en-US", {
      currency: "GBP",
      style: "currency",
    });

    return (
      <InvoiceCardComponent key={invoice.id}>
        <UserInfo>
          <Id>
            <HashTag>#</HashTag>
            {invoice.id}
          </Id>
          <Date>
            <Time dateTime={invoice.paymentDue}>
              Due {day} {month} {year}
            </Time>
          </Date>
          <Name>{invoice.clientName}</Name>
        </UserInfo>
        <PaymentInfo>
          <Price>{formattedTotal}</Price>
          <Status>
            <StatusIcon></StatusIcon>
            {invoice.status}
          </Status>
          <RightIcon />
        </PaymentInfo>
      </InvoiceCardComponent>
    );
  });

  return <React.Fragment>{renderInvoices}</React.Fragment>;
};

export default InvoiceCard;
 

Я буду признателен за любую помощь. Спасибо!

В этом случае вам нужно явно задать width значение для каждого столбца в каждой строке. Затем в каждом столбце вы можете выполнить любой стиль в зависимости от ваших потребностей ( text-align , flex с justify-content и т.д.), Чтобы все ячейки в одном столбце имели одинаковые стили.

 .row-wrap {
  display: flex;
}
.col-wrap {
  background: red;
  margin: 2px;
}
.col1 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 200px;
  text-align: left;
}
.col2 {
  width: 300px;
  text-align: center;
}
.col3 {
  width: 150px;
  text-align: left;
}
.col4 {
  width: 400px;
  text-align: right;
} 

 <!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
      <div class="row-wrap">
        <div class="col-wrap col1">text</div>
        <div class="col-wrap col2">text</div>
        <div class="col-wrap col3">text</div>
        <div class="col-wrap col4">text</div>
      </div>
      <div class="row-wrap">
        <div class="col-wrap col1">
          longgggggggggggggggggggggggggggggggggggggg text
        </div>
        <div class="col-wrap col2">text</div>
        <div class="col-wrap col3">text</div>
        <div class="col-wrap col4">text</div>
      </div>

  </body>
</html>