DEV Community

Discussion on: Good or bad: Styled components theme helper

View post
Collapse
 
andyford profile image
Andy Ford •

Good! =) But maybe already built? ... github.com/styled-system/styled-sy...

The only drawback to theme-get I've found is it doesn't offer any type safety if using with TypeScript.

What I have settled on is to use the styled-components ThemeProvider higher up in the app so that all components get a 'theme' prop, then in individual components:

import styled, { css } from 'styled-components';

const MyComponent = styled.p`
    ${({ theme }) => css`
        color: ${theme.colorPrimary)};
        background: ${theme.colorBackgroundPrimary};
`}
`;
Enter fullscreen mode Exit fullscreen mode

... wrapping the whole declaration block in the css function is still more boilerplate than I'd like, but now you don't have the verbosity in every reference to 'theme'

there's a lot of discussion on this topic here: github.com/styled-components/style...