渲染道具时导致意外行为的样式化组件答案

【问题标题】：styled-components causing unexpected behaviour when rendering props渲染道具时导致意外行为的样式化组件
【发布时间】：2019-08-15 10:04:23
【问题描述】：

我有一个 WhiteBox react 组件，它简单地渲染一个带有一些样式的白框。我有一个 SmallBox 反应组件，它只是使用 WhiteBox 来呈现更具体的框。我有一个 Content react 组件，它呈现三个 SmallBox 框，它们完成了它应该做的事情（呈现三个白框）。但是，当我尝试从父级添加文本作为道具时，白框与顶部的一些意外边距对齐。注意：当我简单地输入“这是一个文本”时，css 没问题，但是当我将“这是一个文本”作为 props.text 发送时，白框会从顶部以额外的边距呈现。我使用 styled-components 并按照我所说的做出反应。

我尝试控制台记录文本，一切似乎都还好。我也试过切换 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;

【问题讨论】：

无法重现该问题。您的代码可以按您的意愿工作。您的 StyledContent 的大小为 100%，但有一个顶部和左侧偏移量。也许这会导致您在重新加载时出现问题？为什么导出默认 WhiteBox 中有 3 个刻度；``` ？
三个刻度？仅在 SOF 问题中，不在我的代码中。没有图片很难解释，但无论如何，当我将文本添加到白框和 3 个框中的 1 或 2 个时，css 会发疯。只有当所有三个 SmallBox 都发短信时，这些框才会按预期显示在顶部没有边距

标签： reactjs styled-components

【解决方案1】：

问题与渲染的行数有关。道具中的文字越长，渲染的线条就越多。

一种解决方案是更改 WhiteBox 的 display 属性：

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

另一种解决方案是覆盖默认样式vertical-align: baseline，只需添加vertical-align: top;

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

【讨论】：