loading...

re: Extend usage of styled-components in React VIEW POST

FULL DISCUSSION
 

Why not to use default components' extending mechanism provided by styled-components?

const MyButton = styled.button`
color: tomato;
`;

const MyExtendedButton = styled(MyButton)`
font-size: 2rem;
`;
 

Yes, you can use that in some cases.
But some times, it doesn't necessary to create another component extended from another component.
I'm not even sure, but I think it does affect your components tree and run-time too.

But if you send your customized styles as a prop, you just affected your build-time, not adding another component.

 

Well, if you don't want to add another SC component, you can just inline styles like in regular react component without introducing extra styles prop:

<MyButton style={{fontSize: '2rem'}}>hi</MyButton>

That's another point (:
It will increase the React's run-time.
Because it will be added as inline-styles in HTML tag.
But if you pass this style props into the body of styled-component, it will be used in build-time.

Code of Conduct Report abuse