jxnblk/system-components

.extend & .withComponent not working as expected

Closed this issue · 1 comments

Love the ease of system-component. Ran into this bug with extends today and can't get them to work. Extend won't overwrite eg.color values & withComponent won't take the original values.

`const SubHeadline = system ({
lineHeight: 1,
fontSize: 2,
is: 'div',
fontFamily: 'Muli',
fontWeight: 'xbold',
})

const SubHeadlineLink = SubHeadline.withComponent('a')`

I have almost zero idea how .extend and .withComponent work under the hood, but they almost always present weird bugs like this. If you're using system-components, you might be better off using the is prop, e.g. const SubHeadlineLink = props => <SubHeadline is='a' {...props} />

Also, heads up that this repo has move to https://github.com/jxnblk/styled-system/tree/master/system-components and I'll be archiving this one soon