在前端开发中，我们经常需要编写复杂的 UI 组件，这些组件的样式通常是由 CSS 控制的。但是，在实际开发中，我们往往需要根据不同的业务需求来动态调整组件的样式。
为了能够更好地组织和管理组件的样式，我们可以使用 CSS-in-JS 的方式来编写样式。随着 React 库的流行，一些优秀的 CSS-in-JS 库也应运而生。其中，react-matches 是一个小而灵活的 CSS-in-JS 库，它可以帮助我们更好地组织和管理组件的样式。
安装和使用
使用 npm 包管理器来安装 react-matches：
npm install --save react-matches
在组件中引入 react-matches：
import { createMatches } from 'react-matches';创建一个 matches 对象：
const matches = createMatches({
small: '(max-width: 767px)',
medium: '(min-width: 768px) and (max-width: 1023px)',
large: '(min-width: 1024px)',
});在组件中使用 matches：
-- -------------------- ---- -------
----- --------- - -- -- -
----- ------ - ---------
------ - ------ ----- --
------- - ------ ------- --
------ - ------ ------ --
---
------ -
---- ---------------
--------- ----------
------
--
--在上面的代码中，我们首先通过 createMatches 函数创建了一个 matches 对象，并通过三个键值对定义了三个断点。
接着，在组件中定义了一组 styles 对象，这个对象会依据断点值来返回对应的样式对象。例如，当屏幕宽度在 small 范围内时，会应用 color: red 的样式；当屏幕宽度在 medium 范围内时，会应用 color: green 的样式；当屏幕宽度在 large 范围内时，会应用 color: blue 的样式。
最后，我们将这个 styles 对象应用到了组件的 style 属性上。
深入学习
react-matches 的实现原理非常简单，它其实只是一个根据断点值来选择对应样式的函数。
在上面的示例中，我们定义了像 small、medium、large 这样的断点值。这些断点值本质上就是媒体查询，它们可以用来查询屏幕的宽度等信息。react-matches 会在加载组件时计算出当前屏幕的宽度，然后根据媒体查询来选择对应的样式。
需要注意的是，我们可以自定义断点值，但断点值的命名应当有一定的规律。通常来说，我们会采用类似于断点的命名方式，例如 small、medium、large 等。这样一来，我们就可以通过断点值来快速地分辨出对应样式所适用的屏幕尺寸。
另外，由于 react-matches 只是一个选择对应样式的函数，并不会对样式本身造成太大的影响。因此，在使用 react-matches 时，我们可以自由地使用任何样式语法。
结语
总的来说，react-matches 是一个小而灵活的 CSS-in-JS 库，它可以帮助我们更好地组织和管理组件的样式。通过学习 react-matches，我们可以更深入地理解 CSS-in-JS 的原理和应用，这将有助于我们更好地编写复杂的 UI 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671f81e8991b448e3890