React Styled-Components：如何对隐式呈现的组件进行样式化？

Question

我正在使用styled-components在我的应用程序中实现一个亮/暗主题。不确定这是否太重要了，但我正在使用打字脚本。我还是一个新的反应和ts。

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

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

或者在自定义组件上（我可能拥有也可能不拥有该类型）。这里，我将从react-grid-layout中对responsivedridlayout进行样式化：

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

然而，当我需要对没有显式呈现的组件进行样式化时，我会遇到麻烦。对于上面的例子，我显然在代码的某个地方有：

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

但是关于样式呢，比如说我自己不呈现的 的子级？在DOM中，我可以看到react-grid-layout呈现的其他子组件，例如 。如果我想更改此组件上的主题，该怎么办？

Answer 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这样的样式化组件中工作。