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

Question

我正在使用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/> 。 如果我想改变这个组件的主题怎么办？

Answer 1

您可以通过浏览器检查器简单地获取子组件 class 名称并将它们设置为：

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 等样式组件。