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

【问题标题】：React - Styled Component with multiple classesReact - 具有多个类的样式化组件
【发布时间】：2021-02-26 11:58:22
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

我认为你需要考虑两个类的组合样式，并使用道具来动态调整你的样式。这些类在普通 CSS 中做了什么？
我们可以得到@Aib Codes Daily 示例，.search-input { background-color: blue; } .search-input-small { color: white; }
先定义const SearchInput = styled.div` backgroundColor: blue;`，再定义const SearchInputSmall= styled(SearchInput)` color: white;`，用SearchInputSmall样式的组件代替多个类的div。

标签： javascript reactjs typescript frontend styled-components

【解决方案1】：

使用 styled-components，您可以使用类似的格式。

在这里，我们正在创建一个名为 Div 的样式化组件，在样式化组件中，我声明了 .search-input 和 .search-input.search-input-small 类来设置示例中的 div 样式。

Div 被视为父容器。

const Div = styled.div`

display: flex;
background-color: black; 

.search-input {
background-color: blue;
}
.search-input.search-input-small {
color: white;

}
`;

我们这样称呼新创建的样式化组件：

export default function App() {
  return (
      <Div>
      <div className="search-input search-input-small">Hello</div>
      </Div>
  
  );
}

如您所见，示例中的<div class="search-input search-input-small"> 是父Div 的子代。父级 Div 不需要样式，但我在此示例中包含了它们。

这里还有一个codesandbox 和一个工作示例。

【讨论】：

您好，谢谢您的回答，但我想删除我所有的 html 以使用样式化组件，该怎么做？谢谢艾布！

【解决方案2】：

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

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

【讨论】：

您好，谢谢您的回答，但是如果我有另一个使用.search-input-small 的div 和另一个像hello-world search-input-small 这样的类怎么办？我必须一次又一次地复制 css 吗？
您可以将所有想要的类添加到 Div，然后使用 className 关键字应用您希望在特定 Div 使用中使用的类。