DEV Community

Discussion on: How to use Themes in styled-components

Collapse
madv profile image
Amateur blogger • Edited on

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?

code snippet

Thread Thread
aromanarguello profile image
aromanarguello Author • Edited on

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 👇

const Input = styled.input`
  // all your other inputFields styles
  @media (min-width: ${({
      theme: {
        breakPoints: { mobileS }
      }
    }) => mobileS}) {
    fontSize: ${({ theme: { fontSizes } }) => `${fontSizes[1]}px` }
  }
`

And in my theme object:

const theme = {
  fontSizes: [12, 14, 16, 18, 20],
  breakPoints: {
    mobileS: '320px',
    mobileM: '375px',
    mobileL: '425px'
  }
}

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}

Thread Thread
madv profile image
Amateur blogger

I assumed the same that there isn't a straightforward way to handle the various mobile sizes.
However, thanks for replying :)

Thread Thread
cesar1983 profile image
César Fernandes de Almeida

If you are still looking for something you should try github.com/morajabi/styled-media-q...