Hey,
Thank you for your reply. I really loved your article and I am following the same approach.
However, my question is around the snippet i have attached.
Basically, in my theme i am setting common styles for my input fields which will be reused in my website.
How do i manage the commented bit?
Are you trying to include in the commented part in the theme object?
@media...// {fontSize:12px}
If so, I am not sure if this is possible, at least I can't think of a way to do it 😅 The way I would manage it would be something like this. I would create a reusable input component that I could import into my other components. Something that would look like this 👇
constInput=styled.input`
// all your other inputFields styles
@media (min-width: ${({theme:{breakPoints:{mobileS}}})=>mobileS}) {
fontSize: ${({theme:{fontSizes}})=>`${fontSizes[1]}px`}
}
`
If you were to kebab-case your keys in the theme object, you could theoretically also be able to ...(spread) them on to your component something like: ${props => ...props}
How would you handle responsive designs in theming?
Basically, fontSize for different layouts(mobile)?
Hey! Great question!
I usually do this by creating an object inside the theme object.
something like:
Or you could put them on an array and then map them. Does this answer your question? If not would be glad to provide more examples :D
You could also name them differently based on the layout. Or create an object of layouts, with all the properties for the size inside one object.
Hey,
Thank you for your reply. I really loved your article and I am following the same approach.
However, my question is around the snippet i have attached.
Basically, in my theme i am setting common styles for my input fields which will be reused in my website.
How do i manage the commented bit?
Are you trying to include in the commented part in the theme object?
If so, I am not sure if this is possible, at least I can't think of a way to do it 😅 The way I would manage it would be something like this. I would create a reusable input component that I could import into my other components. Something that would look like this 👇
And in my theme object:
If you were to
kebab-case
your keys in the theme object, you could theoretically also be able to...
(spread) them on to your component something like:${props => ...props}
I assumed the same that there isn't a straightforward way to handle the various mobile sizes.
However, thanks for replying :)
If you are still looking for something you should try github.com/morajabi/styled-media-q...