Search code examples
reactjsstyled-components

Styled Components v3 has empty theme object

After upgrading to styled-components@latest (3.1.0) upon starting the app, this error is thrown:

Uncaught TypeError: Cannot read property 'margin' of undefined

Upon inspection, it looks like the theme object is empty in a component defined like this:

export const Form = styled.form` ${({ theme }) => theme.layout.margin.all.small}; `;

Logging theme here returns {}, however at the <ThemeProvider> level in jsx, the theme logs as expected, complete with all the values.

If I downgrade to 2.4.0, it works fine and as expected.

Solution

  • It turns out there were multiple versions of styled-components colliding with each other.

    Remove the duplicates and worked as expected.