reactjs - Styled components default styles fallback if no theme provided

Question

I have created a design system in my monorepo using styled components & react. Currently if I import any component from the design system into any of the other packages in order for it to work successfully it needs to be inside a ThemeProvider with the required theme.

I am trying to have a set of default fallback styles if the components are rendered outside of a theme provider

export const ButtonStyled = styled.button`
    background: ${props => props.theme.button.colors.primary || '#f8f8f8'};
`

If I render this button outside of a theme provider I get Cannot read property 'colors' of undefined

question from:https://stackoverflow.com/questions/65644114/styled-components-default-styles-fallback-if-no-theme-provided

Answer 1

Waitting for answers