reactjs - styled-components - 将样式放在一个单独的文件中并将其导入到组件中

Question

在下面的 React 组件中，我使用了 样式组件 库用于样式化。

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

现在我想剪切样式部分并将其放在一个名为 的单独文件中。 myList-styling.js 并将其导入我的组件 MyList.jsx ，但我不确定如何。

能否请你帮忙？

Answer 1

这很容易。你可以从 mylist-styling.js 导出你的 StyledComponents，然后从 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%;
     }
  `

只需在此处导入它们:

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