什么是 Radium？
Radium 是一个用于 React 应用程序的 JavaScript 库，它提供了一种简单的方法来处理与 CSS 相关的所有问题。Radium 提供许多功能，例如媒体查询、伪类和伪元素等，而且使用非常简单。
安装 Radium
要使用 Radium，你需要首先在你的项目中安装它。你可以在终端中使用以下命令安装：
npm install radium
如何使用 Radium
使用 Radium 很简单，只需在需要添加样式的组件上添加 Radium 到 import 语句中，并使用 Radium 函数将组件包裹起来即可。例如，如果我们有一个带有文本输入框的简单组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
------ ------ ----------- ------------------- ---
-
-
------ ------- ------------我们可以通过下面的方式使用 Radium 为其添加样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------
----- ----------- ------- --------------- -
-------- -
----- ------ - -
------ -
--------- -------
-------- -------
------- -------
------------- ---- ----- ------
--------- -
-------- -------
------------- ---- ----- -----
-
-
--
------ -
------
-----------
-------------------
--------------------
--
--
-
-
------ ------- --------------------在这个例子中，我们将 MyComponent 组件包裹在 Radium 函数中，并通过 styles 对象来定义组件的样式。注意到 Radium 的样式对象中，我们可以使用 CSS 伪类或伪元素来定义样式，如:hover、:active、::before等。此外，在上面的示例中，我们还在输入框获取焦点时改变了其下划线的颜色。
使用 Radium 的常见问题
如何使用 @media 查询？
在 Radium 样式对象中，你可以使用 @media 查询来定义响应式样式：
-- -------------------- ---- -------
----- ------ - -
------ -
--------- -------
-------- -------
------- -------
------------- ---- ----- ------
------- ----------- -------- -
--------- ------
-
-
--在这个例子中，当屏幕宽度小于等于 600 像素时，输入框字体大小将变为 16 像素。
如何使用伪类和伪元素？
在 Radium 样式对象中，你可以使用伪类和伪元素，在样式对象中的属性名前加上一个冒号即可：
-- -------------------- ---- -------
----- ------ - -
------- -
---------------- -------
-------- ----- ------
------------- ------
--------- -
---------------- ------
--
----------- -
-------- -----
-------- ---------------
------ -------
------- -------
------------ ------
---------------- -----
-
-
--在这个例子中，我们定义了一个带有伪元素的按钮。注意到伪元素的样式使用双冒号 ::。
如何动态修改样式？
在 Radium 中，你可以通过 this.setState() 来动态地改变组件的样式。例如，在下面的例子中，我们为输入框添加了一个“放大”按钮，点击该按钮后，输入框将变得更大：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
-------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------