title: styled-components - putting styling in a separate file and import it in to component
body: <p>In the bellow React component, I'm using <strong>styled-components</strong> library for the purpose of styling.</p>
  
  <pre><code>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) =&gt; {
      return (
        &lt;StyledLi key={item.id}&gt;
          &lt;TextContainer&gt;
            &lt;h3&gt;{item.name}&lt;/h3&gt;
            &lt;p&gt;{item.details.short}&lt;/p&gt;
          &lt;/TextContainer&gt;
          &lt;Btn onClick={() =&gt; setID(item.id)}&gt;Read more&lt;/Btn&gt;
        &lt;/StyledLi&gt;
      )
    })
  
    return (
      &lt;StyledUl className='cf'&gt;
        {list}
      &lt;/StyledUl&gt;
    )
  }
  
  export default MyList
  </code></pre>
  
  <p>Now I want to cut the styling part and put it in a separate file called <strong>myList-styling.js</strong> and import it in to my component <strong>MyList.jsx</strong>, but I'm not sure how. </p>
  
  <p>Could you please help?</p>