styled-компоненты, вызывающие неожиданное поведение при рендеринге реквизита

Question

У меня есть компонент реагирования WhiteBox, который просто отображает белое поле с некоторыми стилями. У меня есть компонент реакции SmallBox, который просто использует WhiteBox для рендеринга более специфического поля. У меня есть компонент «Реакция контента», который отображает три блока SmallBox и выполняет то, что он должен делать (отображает три белых поля) Однако, когда я попытался добавить текст в качестве подпорки от родителя, белое поле выравнивается с неожиданным краем сверху. ПРИМЕЧАНИЕ: когда я просто помещаю «Это текст», css в порядке, но когда я отправляю «это текст» как props.text, whitebox отображается с дополнительным полем сверху. Я использую styled-компоненты и реагирую, как я сказал.

Я попытался утешить журнал, и все вроде бы нормально. Я также попытался переключить props.children или props.text, и он не работает

----------------- Компонент белой коробки ----------------------

import styled from "styled-components";

const StyledBox = styled.div`
  display: inline-block;
  width: ${props => props.width}px;
  height: ${props => props.height}px;
  margin-right: ${props => props.marginRight}px;
  margin-left: 100px;
  background-color: white;
  border-radius: 5px;

  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #646777;
  padding: 10px;
`;
const WhiteBox = props => {
  return (
    <StyledBox
      width={props.width}
      height={props.height}
      marginRight={props.marginRight}
    >
      {props.text} // if I change this to simply "this is a text" it works well. somehow the props.text is causing problems.
    </StyledBox>
  );
};

export default WhiteBox;```

-----------------Small Box Component ----------------------

import React from "react";
import styled from "styled-components";
import WhiteBox from "../whitebox/white-box";

const SmallBox = props => {
  return (
    <WhiteBox width={320} height={130} marginRight={70} marginLeft={70} text={props.text}>
    </WhiteBox>
  );
};

export default SmallBox;


-----------------Content Component ----------------------


import React, { Component } from "react";
import SmallBox from "./smallbox/small-box";

import styled from "styled-components";

const StyledContent = styled.div`
  position: absolute;
  left: 320px;
  top: 80px;
  width: 100%;
  height: 100%;
  background-color: #f1f3f7;
`;


class Content extends Component {
  render() {
    return (
      <>
        <StyledContent>
          <SmallBox text="this text is great" /> // causing problem
          <SmallBox />
          <SmallBox />
        </StyledContent>
      </>
    );
  }
}

export default Content;

Answer 1

Проблема связана с тем, сколько строк отображается. Чем длиннее текст в реквизите, тем больше строк отображается.

Одним из решений было бы изменить свойство display для WhiteBox:

const StyledBox = styled.div`
  display: inline-flex;
  ....
`;

Другим решением было бы переопределить стиль по умолчанию vertical-align: baseline, просто добавив vertical-align: top;

const StyledBox = styled.div`
  display: inline-block;
  ....
  vertical-align: top;
`;