在前端开发过程中，我们常常需要针对不同的条件，给 DOM 元素加上不同的样式。比如说，在屏幕宽度小于某个值的情况下，我们想要给一个元素添加一个隐藏的 class。这时，我们就需要使用一些工具来帮助我们方便地实现这些逻辑。其中一个非常实用的工具是 npm 包 styled-is。
styled-is 是什么
styled-is 是一个 npm 包，它提供了一系列用于创建样式条件的函数，能够帮助我们生成 CSS 代码，从而方便地实现我们需要的样式逻辑。
安装 styled-is
要使用 styled-is，我们首先需要在项目中安装它。我们可以在命令行中输入以下命令来安装它：
npm install styled-is
styled-is 使用示例
下面，我们来看一个具体的示例，演示如何使用 styled-is。
创建样式条件
首先，我们需要使用 styled-is 来创建样式条件。
我们可以使用 styled-is 中提供的以下几个函数来创建样式条件：
is：创建一个普通条件，满足条件时为 true。not：创建一个取反条件，满足条件时为 false。either：创建一个多重条件，其中至少有一个条件满足时为 true。all：创建一个多重条件，其中所有条件都满足时为 true。
举个例子：
import { is, not, either, all } from "styled-is";
const isSmall = is("width", "<", "640px");
const isMedium = all(is("width", ">=", "640px"), is("width", "<", "1024px"));
const isLarge = is("width", ">=", "1024px");上面的代码创建了三个不同的条件：isSmall、isMedium 和 isLarge。
其中，isSmall 表示屏幕宽度小于 640px，isMedium 表示屏幕宽度在 640px 和 1024px 之间，isLarge 表示屏幕宽度大于等于 1024px。
创建样式对象
接下来，我们需要使用 styled-is 来构建样式对象。
我们可以使用 styled-is 中提供的 styled 函数来创建样式对象。
-- -------------------- ---- -------
------ ------ ---- --------------------
------ - --- ---- ------- --- - ---- ------------
----- --- - -----------
---------------
----------------- ----
---
---------------------- --------------
----------------- -----
---
----------------------- ------------------ -------------------
----------------- ------
---
--上面的代码创建了一个名为 Box 的 React 组件，它会根据不同的样式条件，给自身添加不同的背景颜色。
其中，${is("small")(...)} 表示在 isSmall 条件下添加背景颜色为红色的样式，${either(is("medium"), is("large"))(...)} 表示在 isMedium 或 isLarge 条件下添加背景颜色为蓝色的样式，${all(not(is("small")), not(is("medium")), not(is("large")))(...)} 表示在不满足任何样式条件时添加背景颜色为绿色的样式。
在组件中使用样式对象
最后，我们需要在 React 组件中使用我们刚刚创建的样式对象。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
------ - --- ---- ------- --- - ---- ------------
----- --- - -----------
---------------
----------------- ----
---
---------------------- --------------
----------------- -----
---
----------------------- ------------------ -------------------
----------------- ------
---
--
----- --- - -- -- -
------ ------------- --- ----------
--
------ ------- ----在这个简单的例子中，我们创建了一个组件 Box，它会根据不同的样式条件，生成不同的背景色。我们可以在组件中直接使用 Box 这个组件，然后它就会根据当前的样式条件自动切换背景色。
总结
使用 styled-is，我们可以非常方便地创建样式条件，生成样式代码，然后应用到我们的 React 组件上。它能够极大地简化我们的样式逻辑代码，减少代码量，也能让我们的代码更加清晰易懂。
参考文献
- styled-is GitHub：https://github.com/johanholmerin/styled-is
- styled-components：https://styled-components.com/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae8fb5cbfe1ea0610e6c