迹忆客 专注技术分享

Styling — 是每个 Web 开发人员必须知道的前端 Triada 中的元素之一：HTML/CSS/JS 🤔。 另一方面，有一大群 Web 开发人员不喜欢 CSS。 他们更喜欢使用一些帮助程序和库，基本上非常努力地避免编写这种神秘的样式语言。 而且我们不应该评判这些人，尤其是当它与 React 相关时，因为它是 JSX 的本质。

无论如何，这篇文章适用于：爱好者❤️和仇恨者😠。 我们将回顾 3 种将 react 组件样式化过程转变为愉快旅程的方法。 大家可以选择或多或少地控制最符合自己的用例的样式选项。

1. 使用 CSS 模块完全控制 React 组件样式

是的，大家可以完全忽略这些库并直接使用 CSS/SCSS/SASS，就像我们没有任何 JSX 一样。 此功能从 react-scripts@2.0.0 开始可用。 基本上，一切都可以随心所欲地使用。 使用以下语法 [name].module.css 创建样式表。

Text.module.css

.success {
  background-color: green;
}

并简单地导入组件

import React from 'react';
import styles from './Text.module.css'; // 将 css 模块样式表作为样式导入
 
const Text = () => {
   return <div className={styles['success']}>Successful message</div>;
}

style['class-name'] 与 style.className 相比，该格式更可取，以使我们的类名接近标准的 kebab 大小写而不是丑陋的驼峰大小写。

它将使用 [filename]_[classname]_[hash] 格式自动为我们确定样式范围，最终结果在浏览器中将如下所示：

<div class="Text_success_sdfg43l">Successful message</div>

我们还可以使用 SCSS 和 SASS 等预处理器样式表，只需安装 npm install scss 或 npm install sass 。

这种方法使我们可以完全自由地使用 CSS，并且无需学习新的语法或库。

2. 使用 Chakra UI 样式化 不使用 CSS

这是我的前 2 个选项，非常适合辅助项目和中小型 Web 应用程序。 今年，tailwind 变得非常流行，许多 Web 开发人员发现它是无需编写一行 CSS 即可设置组件样式的完美解决方案。 它的缺点是我们需要在开始时经常查找库，直到我们习惯它为止。 另一个问题是组件内部会有一堆类，它们会膨胀你的 React 组件并迫使你复制这些类。

Chakra UI 与此类似，但除了样式之外，我们还可以获得 UI 组件。 它拥有构建任何复杂布局所需的一切。 如果大家需要更精细的定制，它也足够灵活。 tailwind 的区别在于，在 Charka UI 中，我们将主要通过 props 传递样式，而不是编写类列表，React 应用程序使用 props 看起来更自然。

首先，我们需要安装依赖项：

$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

将提供程序设置到应用程序的根目录：

function App() {
    return (<ChakraProvider>
                <TheRestOfYourApplication />
            </ChakraProvider>)
}

现在你可以开始了：

<Text fontSize='6xl'>Your 6xl size text</Text>

如果大家不需要微妙的样式并希望快速构建应用程序原型，此解决方案可以快速满足大家的需求。 我喜欢在我的大多数项目中使用它。

3. React 样式之王——styled-components

不是我最喜欢的，但最流行的 React 样式库样式组件之一。 它被许多知名公司使用。 我不喜欢它的原因是你每次想要应用一些简单的样式时都需要创建一个新组件。 可能这在正常世界中是有意义的，我们需要添加一个类，但在这里我们将拥有一个单独的组件。 如果想构建自己的 UI 组件库，这可能是一个很好的解决方案。 styled-components 的一个很酷的特点是你可以通过 props 设置样式条件，而且它是可定制的。

从安装依赖项开始：

$ npm install --save styled-components

现在我们已准备好创建第一个样式组件：

const Container = styled.div`
  text-align: center;
`

然后我们可以将其用作组件：

<Container>Your text</Container>