在前端开发过程中，我们常常需要使用 CSS 来美化页面，而为了更加方便地管理代码，我们可以使用一个流行的 npm 包叫做 styled-components。而在这个包中，又有一个叫做 styled-react 的 npm 包，接下来我们将详细介绍如何使用它。
什么是 styled-react？
styled-react 是一个使用 JSX 语法和 JavaScript 对 CSS 进行封装和处理的库。通过它，我们可以创建出来自定义 CSS 样式的 React 组件，并且可以获取组件状态和 props，并在其基础上进行样式的调整。
如何安装 styled-react？
在使用 styled-react 之前，我们需要使用 npm 安装它。在终端中输入以下命令即可：
npm install styled-react
安装完成后，我们就可以在项目中使用 styled-react 了。
如何使用 styled-react？
首先，我们需要在项目中引入 styled-react 的模块：
import styled from "styled-react";
然后，我们可以通过 styled 函数来创建一个样式组件。它接收一个 HTML 标签作为参数，并返回一个封装了该标签的组件。例如，下面的代码创建了一个自定义的按钮：
const Button = styled.button` background-color: blue; color: white; padding: 10px; border-radius: 5px; `;
以上代码展示了在 styled-react 中，我们可以使用 CSS 的语法来对组件进行样式的设置。注意，我们需要将样式写在模板字符串中，这样我们就可以像任何其他的 React 组件一样来使用该组件：
<Button>Click me!</Button>
接下来，我们将演示一些更加复杂的样式的设置方式。
样式的继承与复用
在 styled-react 中，我们可以通过继承样式的方式来减少代码的重复，实现样式的复用。下面是一个实现此目标的示例：
-- -------------------- ---- ------- ----- ---------- - -------------- ----------------- ------- -- --------------------- -- -------- ------ ------- -- ----------- -- --------- -------- ----- -------------- ---- -- ----- ------------- - ------------------- ----------------- ----- -- ----- ------------- - ------------------- ----------------- ------ --
在上面的代码中，我们首先定义了一个名为 BaseButton 的基础组件，并在其中设置了通用的样式，同时在样式中使用了 props 来实现可定制的样式。然后，我们通过继承样式的方式，创建了两个特定类型的按钮：PrimaryButton 和 SuccessButton。
这两个按钮都是通过继承 BaseButton 来实现的，并且我们可以通过传递不同的 props 来修改它们的背景色和字体颜色。
动态样式的设置
在 styled-react 中，我们也可以根据组件的状态和 props 来设置样式。例如，下面的代码实现了当鼠标悬停在按钮上时，背景色变为红色的效果：
-- -------------------- ---- -------
----- ------ - --------------
----------------- -----
------ ------
-------- -----
-------------- ----
------- -
----------------- ----
-
--在上面的代码中，我们使用了 & 符号来定位元素的伪类，从而实现了悬停时样式的变化。
另一个实现动态样式的方式是使用 props 来设置样式。例如，下面的代码实现了当 disabled props 为真时，按钮会变为灰色且无法点击：
const Button = styled.button`
background-color: ${props => props.disabled ? 'gray' : 'blue'};
color: white;
padding: 10px;
border-radius: 5px;
`;总结
本文介绍了如何使用 npm 包 styled-react 来封装和管理 CSS 样式。我们学习了如何创建自定义样式的组件、实现样式的继承和复用、以及动态设置样式。掌握 styled-react 的使用方式可以使我们在前端开发中更加高效和便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f081e8991b448d5068