Styled Components Break on Component Styling

[koofka]

Tried using a common styled component pattern during refactoring by creating basic styled components and extending that styling via the styled(Component) pattern. Believe this tracks to the manner that the atomic components are being dynamically added to the 'components' import not being compatible with styled(). An easily recreatable example.

Add an atom folder H1 with an index.js file including

import styled from 'styled-components'

const H1 = styled.h1` font-size: 2em; `

export default H1

In a second atom add the following

import styled from 'styled-components import { H1 } from components

const test = styled(H1)` font-size: 4em; `

This test crashes my webpack with the error 'Error: Cannot create styled-component for component: undefined'

Interestingly, if you move the atom to a H1.js file in the same folder as your test atom and modify the code to:

import styled from 'styled-components' import { H1 } from './H1'

const test = styled(H1)` font-size: 4em; `

Everything works normally so this leads me to believe the issue is likely an incompatibility between styled-components and the components aggregation script.

[diegohaz]

Hi, @koofka. Take a look at this comment: https://github.com/diegohaz/arc/issues/130#issuecomment-282408542

Tell me if it helps you

[koofka]

Hey @diegohaz. Thanks for the quick reply. That approach does seem to mostly work. One thing I did notice was that the styling doesn't automatically override like it does with the more plain method. Appears to require adding the !important flag to elicit overrides, but thats really nbd.
i.e.
const Test = styled(props => <H1 {...props} />)` font-size: 50em !important; `

[diegohaz]

That's weird. You shouldn't need to use !important to do that. I think it's out of this project scope. It might be something with your implementation or a bug in styled-components.

Anyway, there's a better way to handle that: https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity

[koofka]

Interesting. Wasn't required prior but thats definitely a better fix for adding overrides. Thanks again.