Closed koofka closed 6 years ago
Hi, @koofka. Take a look at this comment: https://github.com/diegohaz/arc/issues/130#issuecomment-282408542
Tell me if it helps you
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;
`
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
Interesting. Wasn't required prior but thats definitely a better fix for adding overrides. Thanks again.
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.