You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
EDIT- Oops sorry I meant to create this on styled-components/styled-components not styled-components-website... doesn't look like I have the ability to delete or move it
I've been experimenting with different ways to use props and themes in styled-components and came up with these 3 variations:
This is what's shown in most of the docs. I find it unreadable and that's why I went looking for variations with less boilerplate
This is more readable but has nested template literals which I dislike
This seems the cleanest to me
So I'm leaning towards 3. Can anyone comment on more pros/cons of each or other variations I missed?
I also prefer this syntax and defining my themes as simple nested JS objects accessed with dot notation, rather than the syntax of styled-theming which seems to use more magic strings and makes refactoring harder.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
EDIT- Oops sorry I meant to create this on
styled-components/styled-components
notstyled-components-website
... doesn't look like I have the ability to delete or move itI've been experimenting with different ways to use
props
andthemes
instyled-components
and came up with these 3 variations:https://codesandbox.io/s/styled-components-forked-ntfu3?file=/Content.js
So I'm leaning towards 3. Can anyone comment on more pros/cons of each or other variations I missed?
I also prefer this syntax and defining my themes as simple nested JS objects accessed with dot notation, rather than the syntax of
styled-theming
which seems to use more magic strings and makes refactoring harder.Beta Was this translation helpful? Give feedback.
All reactions