Discussion on: How to use Themes in styled-components

[aromanarguello]

Hey! Great question!

I usually do this by creating an object inside the theme object.

something like:

const theme = {
//..other theme objects,
fontSizes: {
  sm: 12,
  m: 14,
  l: 16,
  xl: 22
}

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.

const theme = {
//..other theme objects,
mobile: {
  fontSize: 12,
  margin: '4px',
  color: 'red',
}

[Amateur blogger]

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?

[aromanarguello]

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}

[Amateur blogger]

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

[César Fernandes de Almeida]

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