I am working on a new react project and using material ui with styled components and having some trouble with styling and organization. I've read up on styled components and best practices but I'm still unable to find a solution to styling in big projects.
I've seen many suggestions:
- to create styled components for each time some css needs to be added and storing all these components inside styled.ts file. This approach removes all styling and layout concerns into a separate file but is a lot of work to create styled components for everything
- to make a wrapper styled components around the main react component and use class names - kind of like importing a css file regularly and working with classes
- to make inline css changes if some padding is needed or something and only make styled components for reusable/lengthier css blocks. Doesn't really separate styling and is not as clean since we're leaving inline css but is easier to write
- to treat styled components as regular components, have them in separate files and everything. A component is a component, no longer needing to distinguish between stlying and componentization
Not saying any of these are bad suggestions, but they're quite conflicting and I don't have experience with this. I'd just like to know a scalable approach.
tldr: Is there a good and clean workflow for working with styled components for big projects?
from Styled components workflow in Mui - how to style
No comments:
Post a Comment