DEV Community

Discussion on: How to use Themes in styled-components

madv profile image
Amateur blogger • Edited on

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