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

Posted 2023-02-22

【中文标题】如何对子反应组件进行 css 样式设置？

【英文标题】：How can I css style a child react component?

【发布时间】：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> 的函数组件。

简单的工作示例：https://codesandbox.io/s/react-fiddle-forked-5xt6p?file=/src/App.js

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

【讨论】：

非常有意义。你就在那里，也许我把它复杂化了。然而，我确实需要它作为一个组件。为了解释的目的，我上面给出的例子要简单得多。

如果组件本身呈现