前言
随着 React 等前端框架的普及，CSS-in-JS 的技术也越来越受到关注。CSS-in-JS 可以将 CSS 和 JS 合并到一起，使用 JS 来管理样式，避免了传统 CSS 的一些问题，如全局污染、选择器层叠等。其中，css-into-js 是一款比较流行的 CSS-in-JS 解决方案。
安装
使用 npm 安装 css-into-js：
npm install css-into-js
使用
基本使用
引入 css-into-js：
import css from 'css-into-js';
定义样式：
-- -------------------- ---- -------
----- ------ - -----
---------- -
-------- -------
----------- ---------
--------------- ---------
------- -------
---------------- ----------
-- -------- -
------- -- ------
-------- -------
---------------- -------
------- -------
------------- ------
------- ----------
---------- -
---------------- -------
--
--
--
---使用样式：
<div className={styles.container}>
<button>点击</button>
<button>取消</button>
</div>高级用法
动态样式
使用模板字符串可以定义动态样式：
-- -------------------- ---- -------
----- ------- - ----------
----- ------ - -----
---------- -
-------- -----
------------ -------
---------------- -------
------- -----
----------------- -----------
- ------ -
------- - -----
-------- -----
----------------- -----
------- -----
-------------- ----
------- --------
------- -
----------------- -----
-
-
--
---媒体查询
使用 @media 可以定义媒体查询：
-- -------------------- ---- -------
----- ------ - -----
---------- -
-------- -------
----------- ---------
--------------- ---------
------- -------
---------------- ----------
-- -------- -
------- -- ------
-------- -------
---------------- -------
------- -------
------------- ------
------- ----------
---------- -
---------------- -------
--
--
--
------- ----------- -------- -
---------- -
-------------- ---------
--
-- -------- -
------- ----- ---
--
--
---全局样式
使用 css.global 定义全局样式：
css.global(`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
`);总结
通过学习本文，我们可以掌握 CSS-in-JS 解决方案 css-into-js 的基本使用方法和高级技巧，能够灵活地管理样式并提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551ec81e8991b448cf61a