React 中 className 和 style-component 的区别答案

【问题标题】：Difference between className and style-component in ReactReact 中 className 和 style-component 的区别
【发布时间】：2021-06-24 12:36:13
【问题描述】：

如果对元素使用 className 来进行样式设置，我为什么要使用 styled-components？

应用样式：

h2.subTitle{
  font-size: 2em;
  color: blue;
}

要使用 className 设置样式的元素：

<h2 className="subTitle">Gucci Snakes </h2>

使用样式组件：

import styled from 'styled-components';
const Subtitle = styled.h2`
  font-size: 2em;
  color: blue;
`;
<Subtitle>Gucci Snakes</Subtitle>

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

来自文档，

styled-components 为您的样式生成唯一的类名。您永远不必担心重复、重叠或拼写错误。

这有助于解决类/样式名称冲突。

https://styled-components.com/docs/basics#motivation

【讨论】：

【解决方案2】：

使用它是因为可读性，classNames 可能工作得很好，但是当你有 1 或 2 个 500 行的 css 文件时你不会那么喜欢它们，而且样式组件的结构类似于 sass。

更多示例和信息您可以点击here、here和here

【讨论】：