React - 具有多个类的样式组件

Question

我即将使用样式组件在 React 中构建一个小项目，但是，我对使用这个包有疑问。我想创建一个将多个类组合在一起的样式组件，但我不知道该怎么做，例如：

<div class="search-input search-input-small">

如何将其变成样式组件？在CSS中有两个不同的类，但在样式组件中我不知道。

谢谢。

Answer 1

有几种方法可以做到这一点。例如，您可以在样式组件上运行基本样式，然后“使用附加样式升级该组件”。

const Div = styled.div`
     /// styles for className -> search-input
    }`
const SmallDiv = styled(Div)`
    /// styles for className -> search-input-small
   `

另外，如果您了解 SASS，您可以使用 & 嵌套来构建 CSS。例如

 const Div = styled.div`
     .search-input {
          //CSS
          &-small {
             //CSS
           }
         
         }
     `