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

Question

I am using styled-components to implement a light/dark theme into my application. Not sure if it matters too much, but I am using TypeScript. I am still pretty new to React and TS.

This is straightforward when the component is a basic HTML element:

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

Or on a custom component (I may or may not own the type). Here I am styling the ResponsiveGridLayout from react-grid-layout :

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

However I get tripped up when I need to styled components that I do not explicitly render. For the examples above, somewhere in code I obviously have:

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

But what about styling say the children of <StyledReactGridLayout/> that I don't render myself? In the DOM I can see other child components that react-grid-layout renders, such as <ReactGridItem/> . What if I want to change the theme on this component?

Answer 1

You can simply get the child components class names via the browser inspector and style them like this:

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);
  }
`

Nesting works in styled-components like sass.