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}
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...