如何对子反应组件进行 css 样式设置？答案

【问题标题】：How can I css style a child react component?如何对子反应组件进行 css 样式设置？
【发布时间】：2022-01-04 02:44:35
【问题描述】：

在简单的 HTML 结构中，我可以实现如下。我想知道如何对 React 和 Styled Component 做同样的事情。

HTML

<div className="slider">
    <section>Content A</section>
    <section>Content B</section>
</div>

我可以像这样定位部分的样式。

.slider section {
   //some styling
};

如何在 React with Styled Component 中实现同样的效果？在这种情况下，我的滑块 div 是一个样式组件，该部分是一个 React 组件，如下所示。

<Slider>
    <SectionComponent text="Content A" />
    <SectionComponent text=" Content B" />
</Slider>

这是我尝试过的，在 Slider CSS 代码块中我尝试设置 SectionComponent 的样式但不起作用。

样式化组件 CSS

export const Slider = styled.div`
    //some css styling
    Slider SectionComponent {
        //styling of the SectionComponent
    }
`;

【问题讨论】：

【解决方案1】：

一般来说，在使用 React 和 Styled Components 时，您不必对每个元素进行组件化。通常，您只想这样做以利用它们带来的额外功能。

在你的情况下，这将是：

   <Slider>
       <section>Content A</section>
       <section>Content B</section>
   </Slider>

因此您可以使用样式组件设置您的部分的样式，例如：

  const Slider = styled.div`
      section {
         //styling of the section
      }
  `;

如果您确实也希望将这些部分作为组件，那么您应该仍然可以执行上述操作；我在下面的示例中添加了多种形式的部分。 section 是 HTML 元素，StyledSection 是样式组件，SectionComponent 是返回 <section> 的函数组件。

在样式化组件中使用 CSS 时，假设您仍在使用普通的 CSS 文件和 HTML 元素。如果您的SectionComponent 是Slider 的孩子并且是<section>。然后，您可以以与 CSS 相同的方式相应地选择它。

【讨论】：

【解决方案2】：

尝试使用字符串模板：

export const Slider = styled.div`
  //some css styling

  ${SectionComponent} {
    //styling of the SectionComponent
  }
`;

【讨论】：