React styled-components：如何设置隐式渲染组件的样式？答案

【问题标题】：React styled-components: How to Style Implicitly Rendered Components?React styled-components：如何设置隐式渲染组件的样式？
【发布时间】：2021-07-16 18:35:46
【问题描述】：

我正在使用styled-components 在我的应用程序中实现浅色/深色主题。不确定它是否太重要，但我正在使用 TypeScript。我对 React 和 TS 还是很陌生。

当组件是基本的 HTML 元素时，这很简单：

export const StyledEllipsis = styled.div`
  &:hover {
    box-shadow: 0px 0px 10px 1px ${props => props.theme.shadow};
  }
`

或者在自定义组件上（我可能拥有也可能不拥有该类型）。在这里，我正在设计来自react-grid-layout 的ResponsiveGridLayout：

export const StyledReactGridLayout = styled(ResponsiveGridLayout)`
  background-color: ${props => props.theme.tertiary};
`

但是，当我需要设置未显式渲染的样式组件时，我会感到困惑。对于上面的示例，我显然在代码中的某处：

...
  <StyledReactGridLayout> ... </StyledReactGridLayout>
...

但是我不渲染自己的<StyledReactGridLayout/> 的孩子们说造型呢？在 DOM 中，我可以看到 react-grid-layout 渲染的其他子组件，例如 <ReactGridItem/>。如果我想改变这个组件的主题怎么办？

【问题讨论】：

标签： javascript css reactjs typescript styled-components

【解决方案1】：

您可以简单地通过浏览器检查器获取子组件的类名，并将它们设置为如下样式：

export const StyledReactGridLayout = styled(ResponsiveGridLayout)`
  background-color: ${props => props.theme.tertiary};

  .react-grid-item {
    background-color: // whatever color u want (u can use props here too);
  }
`

嵌套适用于 sass 等样式化组件。

【讨论】：