我正在使用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>
...
但是关于样式呢，比如说我自己不呈现的react-grid-layout呈现的其他子组件，例如
您可以简单地通过浏览器检查器获取子组件类名,并将其样式设置为如下所示：
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这样的样式化组件中工作。
