如何使用React样式的组件添加自定义CSS

Question

我有一张卡片，我想使用react styled-component添加自定义CSS名称。请建议我如何完成以下工作？

<div className='card custom-css'>
  <span> test </span>
</div>

Answer 1

您可以通过以下方式进行操作。

1. 在需要设置样式的div中创建一个新组件- 例如：

   <Test> <span> test </span> </Test>

然后，您可以按照以下方式设置此组件的样式-

const Test = styled.div`
  color: blue; /* write your css here */
`

1. 在父组件样式内设置特定div的样式-例如：

   const Test = () => ( <div className='card'> <span> test </span> </div> )

并按如下所示设置组件的样式-

const Test = styled(Test)`
    .card {
        font-weight: bold;
    }
    color: blue; /* css for the entire component */
`

此外，您可以通过如下样式为组件中的所有div设置特定的样式-

const Test = styled(Test)`
    div {
        font-weight: bold;
    }
    color: blue; /* css for the entire component */
`

请参阅此处以获取文档-https://www.styled-components.com/docs/basics#extending-styles