在前端开发中，样式的管理一直是一个比较头疼的问题。在 React 生态中，styled-components 和 JSS 的出现各有优缺点，但是在项目中引用它们都需要进行配置，这对于新手来说比较困难。今天我们要介绍的是 npm 包 babel-plugin-styled-jss，它可以使我们在使用 JSS 编写样式时免去配置的麻烦。
什么是 babel-plugin-styled-jss
babel-plugin-styled-jss 这个插件是为了让你在不需要显式导入 JSS 的前提下在项目中使用 JSS 的一种解决方案。它的实现原理是在编译时将样式模板解析为 JSS，然后导入 JSS 并编译成 CSS。
如何安装 babel-plugin-styled-jss
安装 babel-plugin-styled-jss 需要先安装 babel-core：
npm install -D babel-plugin-styled-jss babel-core
如何使用 babel-plugin-styled-jss
在项目中使用 babel-plugin-styled-jss 的步骤如下：
在 .babelrc 中加入插件配置
{ "plugins": ["styled-jss/babel"] }编写 JSS 样式代码
-- -------------------- ---- ------- ----- ------ - - ------- - ----------- ------- ---------------- ---------- -------- ----- ------ ------------- ------ ---------- - ---------------- ------- -- -- -- ----- ------ - ----- -- - ----- - -------- -------- - - ------ ------ ------- ----------------------------------------------- -- ------ ------- ----------------------------在这个示例中，我们简单地定义了一个 button 样式，并通过 injectSheet 定义了一个 styled-component Button。
编译代码
运行 babel 会将 JSS 样式代码编译成 CSS，并将其导入到组件中。我们可以使用 babel 运行以下命令：
babel src -d lib
这个命令会将 src 文件夹中的代码编译后放到 lib 文件夹中。
使用组件
使用组件的时候，我们只需要导入这个组件并使用即可：
import Button from './Button'; const App = () => ( <div> <Button>Click Me!</Button> </div> );
总结
babel-plugin-styled-jss 这个 npm 包是为了在 React 项目中更好地管理和编写样式而存在的一个工具。相信我们通过这篇文章的学习，可以更好地掌握它的使用方法，让我们在前端开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76ce