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.
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.
Run-time speed is completely negligible and isn't something which should be considered when working with Styled-components, although the output should be considered.
Both "regular" extending and your "styles" method will create 2 seperate CSS selectors.
everytime you're writing ${props... a new selector is created for each of the props scenarios. just like each choice you make creates a parallel universe :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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
stylesprop: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.
Run-time speed is completely negligible and isn't something which should be considered when working with Styled-components, although the output should be considered.
Both "regular" extending and your "styles" method will create 2 seperate CSS selectors.
everytime you're writing
${props...a new selector is created for each of the props scenarios. just like each choice you make creates a parallel universe :)