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. First we have to answer this question. What are styled components? They're just basically some components, right?
So we can export them from a file and import them in another!

Just create another file (Let's name it MyList.styled.js) and export your styled components from it. Then all you need to do is to import them in 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.styled'

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%;
`