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