让我们一起来看看 2019 年 React 中的 CSS in JS - React-JSS

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

嘿！我又回来了，这是我的系列文章的第二篇，我决定谈谈如何使用 CSS in js 为 React 应用程序添加样式。

如果你是第一次阅读本系列文章，欢迎先看看我的第一篇文章！我从基础讲起，探讨了如何在 React 中使用纯 CSS，并提供了关于 CSS 常见陷阱的资源，以及我在 React 开发中遇到的个人问题。我还介绍了 React 的内联样式，以及它如何解决其中一些问题，但遗憾的是，它并不能完全解决问题。

好的一方面是，它充满了《黑客帝国》的梗，所以你至少应该为了这个去看看！

让我们一起来看看2019年React中的JS CSS——CSS和内联样式

Phil Tietjen ・ 2019 年 9 月 9 日 ・ 阅读时间 5 分钟

#网页开发 #React #CSS #教程

JSS是什么？

我会尽量言简意赅，以便我们能直接开始使用 React 进行实现，所以让我们利用方便好用的 JSS 文档来了解我们需要知道的内容吧！

JSS 是一个 CSS 样式编写工具，它允许你使用 JavaScript 以声明式、无冲突且可重用的方式描述样式。它可以在浏览器端、服务器端或 Node.js 构建时编译。

哎呀，Wizz Philly，这听起来确实很像你上次展示的 React 内联样式。实际上，正是因为它们的实现方式相似，所以我才决定把 JSS 作为我的第二个主题，毕竟我们已经熟悉了如何在 JavaScript 中编写样式！我们不仅能获得同样的优势，还能获得一些额外的好处，因为它们的底层工作原理略有不同。

JSS 与框架无关。它由多个软件包组成：核心、插件、框架集成等。

核心功能总结起来就是：它允许我们使用 Javascript 来描述样式。

插件- 可以添加到 Core 中的功能，用于增强我们描述样式的方式。

框架集成——让我们能够轻松地将 JSS 与特定框架结合使用！

这就是 React-JSS 的用武之地。

我们假设这个小家伙代表 React-JSS。对我来说呢？

React-JSS 是一个框架集成，用于在 React 应用中使用 JSS。它是一个独立的包，因此我们无需安装 JSS 核心，只需安装 React-JSS 包即可。它通常还包含 JSS 插件和配置。为了快速上手，让我们用上次提到的 Button 组件来比较一下内联样式和 React-JSS 的效果。

内联样式

// Button.js
import React from 'react'

const Button = () => {
  const buttonGreen = {
    backgroundColor: "green",
    border: "2px solid white",
    borderRadius: "2rem"
  };

  return(
    <button style={buttonGreen}>
      I think I'm green
    </button>
  )
}

React-JSS

React-JSS 与 React 结合使用

// Button.js
import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  buttonGreen: {
    backgroundColor: "green",
    border: "2px solid white",
    borderRadius: "2rem"
  }
})

const Button = () => {
  const {buttonGreen} = useStyles()

  return(
    <button className={buttonGreen}>
      I think I'm green
    </button>
  )
}

抱歉，或许更像是这样。

实施方式发生了哪些变化？

• 我们createUseStyles从 React-JSS 包中导入了函数。
• useStyles我们通过调用创建了一个钩子createUseStyles。
• buttonGreen我们在createUseStyles's 参数的对象属性下描述了我们的 CSS 样式
• 我们从钩子函数buttonGreen的返回值中销毁了数据useStyles。
• 我们将其传递buttonGreen给了className属性，而不是style

我们再来看看上次我们用过的 Button 组件，以及影响其样式的 props。

将属性与内联样式结合使用

// Button.js
import React from 'react'

const Button = ({backgroundColour, children}) => {
  const buttonStyles = {
    backgroundColor: backgroundColour,
    border: "2px solid white",
    borderRadius: "2rem"
  };

  return(
    <button style={buttonStyles}>
      {children}
    </button>
  )
}

在 React-JSS 中使用 Props

// Button.js
import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
    buttonStyles: {
      backgroundColor: backgroundColour => backgroundColour,
      border: "2px solid white",
      borderRadius: "2rem"
    }
})

const Button = ({backgroundColour, children}) => {
  const {buttonStyles} = useStyles(backgroundColour)

  return(
    <button className={buttonStyles}>
      {children}
    </button>
  )
}

额外提示：此用法适用于两种实现方式！

// SomePage.js
import React from 'react';
import Button from 'Button';

const SomePage = () => (
  <Button backgroundColour="blue">I'm going to be blue</Button>
)

实施方式发生了哪些变化？

• 我们将backgroundColour属性useStyles作为参数传递给了我们的参数。
• 在我们的系统中，我们可以将其作为函数值createUseStyles访问，并相应地进行赋值。backgroundColour

React 中的 React-JSS 看起来很酷吧？

从 Inline 切换到 React-JSS 能给我们带来哪些好处？

仅从 JSS 来看

• JSS 生成的是 CSS，而不是内联样式。
• JSS 生成哈希类名，以避免选择器中的冲突。
• JSS 拥有高效的 CSS 更新功能，可用于控制动画。

完整的优势列表请参见JSS 文档中的功能列表。

来自 React-JSS

• 它允许我们使用基于 React 上下文 API 的主题。
• 仅提取已渲染组件的 CSS。
• 根据已挂载和未挂载的组件，生成并删除样式表。

如需查看所有优势，请参阅React-JSS 文档。

我个人喜欢 React-JSS 的哪些方面？

简单的

React-JSS 的实现方式与内联样式并没有太大的区别，因此过渡起来非常容易。无论你是第一次学习，还是将应用程序从内联样式迁移到 React-JSS，都可以轻松上手。

钩子

这可能与我之前提到的简单观点有关，但我自从 React 的 Hook API 发布以来就一直是它的忠实用户。这也是个坦白的好时机，我承认我很久以前就尝试过 React-JSS，但并不喜欢它。那时候，你必须使用高阶组件（Higher Order Components）才能将样式变量注入到组件中，这对我来说实在太复杂了，相比其他方案来说简直是天壤之别。createUseStyles然而，新的 API 几乎彻底改变了我的看法；它让代码更容易理解，也更便于编写。

我们的 HTML 中没有内联样式

太棒了！还记得我之前提到的内联样式的缺点吗？嗯，在这里几乎毫不费力就解决了。

我个人对 React-JSS 有哪些不满意的地方？

对象样式

我仍然不喜欢用 JavaScript 对象来描述样式。也许你会觉得我吹毛求疵，但我就是不喜欢失去语法高亮，也不喜欢因为要把 CSS 转译成 JavaScript 而多花 3% 的精力思考代码。而且，把原始 CSS 代码转换成 JavaScript 仍然很麻烦。

为类名分配样式

虽然这样确实方便了从 `<style>` 过渡到 ` style={styles}<style> className={styles}`，但我不太喜欢它在组件文件中的显示效果。考虑到 JSS 会在后台生成 CSS 样式表，而组件需要引用哈希类，这种做法也情有可原。我只是希望它能有一种更美观的形式。

这样是不是给下一篇埋了太多伏笔？

我会使用 React-JSS 吗？

我会时不时地将它列入我的备选方案和工具包中。它为 React 应用提供了简单易用的样式解决方案，性能也足够出色。如果你正在开发使用内联样式的应用，或者你只熟悉内联样式，我强烈推荐使用 React-JSS。

希望下期再见！看看我能不能在2019年结束前“完成”这个系列；不管“完成”的定义是什么！

嘿！我在推特上，如果你想关注我或者和我聊天，可以去那里。我偶尔会在那里发一些东西！