godon019
2/11/2019 - 9:07 AM

Debug for styles (Styled-components)

Note Provider only have one child

<ThemeProvider theme={{ debug: false }}>
  <SomeComponent />
</ThemeProvider>

in Usage

export const Summary = styled.span`
  display: flex;
  justify-content: space-around;
  & > * {
    border: ${props => props.theme.debug && "1px solid red"}
  }
`

see how I can use debug property