时间戳

首页 > 解决方案 > React - 具有多个类的样式化组件

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

问题描述

我即将使用样式化组件构建一个小项目来做出反应，但是，我对使用这个包有疑问。我想创建一个样式化的组件，它汇集了几个类，但我不知道该怎么做，例如：

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

如何把它变成一个样式化的组件？在 css 中有两个不同的类，但在样式组件中我不知道。

谢谢你。

标签： javascriptreactjstypescriptfrontendstyled-components

解决方案

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

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

推荐阅读