styled-components

Question

在下面的 React 组件中，我使用 styled-components 库来进行样式设置。

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'

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

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

reactjs