DEV Community

Discussion on: How to use Themes in styled-components

Collapse
madv profile image
Amateur blogger

How would you handle responsive designs in theming?
Basically, fontSize for different layouts(mobile)?

Collapse
aromanarguello profile image
aromanarguello Author • Edited on

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
}
Enter fullscreen mode Exit fullscreen mode

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',
}
Enter fullscreen mode Exit fullscreen mode
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...