I've been enjoying exploring the world of styled-components, but I'm struggling a bit with the concept of breaking everything down into components and how to customize styles for specific use cases. For instance:
<Flex>
<MyStyledTitle>Hello I am a Title</MyStyledTitle>
<MyStyledBodyText>blah</MyStyledBodyText>
</Flex>
Let's say I wanted to make the following customizations for this scenario:
- Make the title grey (subdued text color),
- Add a right margin of 100px to the body text (for reasons unknown).
In the styled-components approach, the first part could be achieved like so:
<MyStyledTitle colorTint='subdued' />
or even
<MyStyledTitle>
<SubduedText>MyTitle</SubduedText>
</MyStyledTitle>
Maybe using a prop for the title that allows you to choose between subdued text or another child component that defines the grey text.
But what about the second option...
<MyStyledBodyText style={{paddingRight: 100}} />
Inline style? Use a Grid or layout component around it?
When does something become a specific styled-component, and if not, how can smaller style changes be customized?
Although I really appreciate the idea of eliminating the connection between a component and a class name, I find myself torn between the traditional approach of having a 'style sheet' file containing all the classes and modifier CSS, and then utilizing a presenter to select from various combinations of CSS classes.
I may be missing something here, but I would love to see some comprehensive examples of styled components in action. Any suggestions or links would be greatly welcomed!