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

Question

我正准备使用样式化组件构建一个小项目，但是，我对使用这个包有疑问。我想创建一个样式化的组件，将几个类组合在一起，但我不知道该怎么做，例如:

<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
           }
         
         }
     `