我如何 css 为子 React 组件设置样式？

How can I css style a child react component?

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

HTML

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

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

.slider section {
   //some styling
};

如何在带有样式组件的 React 中实现相同的功能？在这种情况下，我的滑块 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
    }
`;

尝试使用字符串模板：

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

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

Playground

一般来说，在使用 React 和 Styled Components 时，您不必将每个元素都组件化。通常，您这样做只是为了利用它们为 table.

带来的额外功能

在你的情况下，这将是：

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

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

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

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

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

在样式化组件中使用 CSS 时，假设您仍在使用普通的 CSS 文件和 HTML 元素。如果您的 SectionComponent 是 Slider 的 child 并且是 <section>。然后你可以 select 相应地以与 CSS.

相同的方式