styled-components - putting styling in a separate file and import it in to component

Question

In the bellow React component, I'm using styled-components library for the purpose of styling.

import React from 'react'
import jsonResponse from '../data'
import styled from 'styled-components'

const StyledUl = styled.ul`
    width: 100%;
`

const StyledLi = styled.li`
    width: 100%;

    /*  Tablet View  */
    @media (min-width: 45.563em) and (max-width: 61.312em) {
        width: 50%;
    }

    /*  Desktop View  */
    @media (min-width: 61.313em) {
      width: 33.33%;
    }
`

const TextContainer = styled.div`
    text-align: left;
`

const Btn = styled.button`
    width: 26%;

    @media (min-width: 45.563em) and (max-width: 61.312em) {
      width: 42%;
    }

    @media (min-width: 61.313em) {
      width: 42%;
    }
`

function MyList ({ setID }) {
  const list = jsonResponse.characters.map((item) => {
    return (
      <StyledLi key={item.id}>
        <TextContainer>
          <h3>{item.name}</h3>
          <p>{item.details.short}</p>
        </TextContainer>
        <Btn onClick={() => setID(item.id)}>Read more</Btn>
      </StyledLi>
    )
  })

  return (
    <StyledUl className='cf'>
      {list}
    </StyledUl>
  )
}

export default MyList

Now I want to cut the styling part and put it in a separate file called myList-styling.js and import it in to my component MyList.jsx, but I'm not sure how.

Could you please help?

Answer 1

It's pretty easy. you can export your StyledComponents from mylist-styling.js and then import them from MyList.js!

    // mylist-styling.js
    export const StyledUl = styled.ul`
      width: 100%;
    `

    export const StyledLi = styled.li`
      width: 100%;

      /*  Tablet View  */
      @media (min-width: 45.563em) and (max-width: 61.312em) {
          width: 50%;
      }

      /*  Desktop View  */
      @media (min-width: 61.313em) {
        width: 33.33%;
      }
  `

   export const TextContainer = styled.div`
     text-align: left;
   `

   export const Btn = styled.button`
     width: 26%;

     @media (min-width: 45.563em) and (max-width: 61.312em) {
       width: 42%;
     }

     @media (min-width: 61.313em) {
       width: 42%;
     }
  `

and just import them here:

// MyList.js
import React from 'react'
import jsonResponse from '../data'
import styled from 'styled-components'
import {styledUI, StyledLi, TextContainer, Btn} from './myList-styling'

Answer 2

Above answers are perfect, but it can be painful to do it for each and every components and pages if we have been putting styled-components in the main jsx file.

To solve that, I created a repository with python code to automatically create style files, add styled-components in, import and delete them in the react jsx file.

This code is written for the most used way of using styled-components (but please collaborate to it!) :

components folder 
            |__component1            
                      |__ index.jsx                      
            |__component2
                      |__ index.jsx
            |__component3
                      |__ index.jsx

With styled-components in each index.jsx file in the form :

import styled from 'styled-components'

const Wrapper = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    height: 100%;
    width: 100%;    
`

 const SubWrapper = styled.div`
    display: inline;
    width: 80%;
`

Running this code will ouput in the form :

components folder 
            |__component1            
                      |__ index.jsx      
                      |__ style.jsx
            |__component2
                      |__ index.jsx
                      |__ style.jsx
            |__component3
                      |__ index.jsx
                      |__ style.jsx

Where styled-components are imported in index.jsx, and style.jsx(or any other style file name) has the form :

import styled from 'styled-components'

export const Wrapper = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    height: 100%;
    width: 100%;    
`

export const SubWrapper = styled.div`
    display: inline;
    width: 80%;
`