什么是 glamor-raw-css
glamor-raw-css 是一个 npm 包，它使你可以使用原生 CSS 写样式然后在 JavaScript 中使用它们。它的灵活性和可重复使用性非常高，特别适合在前端开发中使用。
如何使用 glamor-raw-css
首先，你需要安装该包到你的项目中。在项目文件夹中，打开终端或命令行，输入以下命令：
npm install glamor-raw-css
此时 glamor-raw-css 就已经被安装到你的项目中了。接下来，你需要引入 glamor 包和 glamor-raw-css 包。
import glamor from 'glamor'
import { css } from 'glamor-raw-css'现在，你可以在 JavaScript 中写原生 CSS，使用 css 方法将其转化为可重复使用的对象。
-- -------------------- ---- -------
----- ------ - ----
------- -
----------------- -----
------ -----
-------- -----
----------- -------
-
----- -
------- -----
-
----- -- -
---------- -----
-
----- - -
---------- -----
-
-现在我们已经定义了一些样式，可以将它们应用到我们的 HTML 页面上了。首先，我们需要将样式对象传递给 glamor 包的 css() 方法。
const styleSheet = glamor.styleSheet.create({})
styleSheet.insert(...styles)现在样式已经被应用到一个空的样式表对象上。如果你想要在 HTML 页面上使用这些样式，你需要将这个样式表对象挂在到页面的 head 标签上。
const renderStyles = () => (
<head>
<style dangerouslySetInnerHTML={{ __html: styleSheet.toString() }} />
</head>
)示例代码
下面是一个完整的示例代码，它演示了如何使用 glamor-raw-css 包创建并应用样式：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ ------ ---- --------
------ - --- - ---- ----------------
-- - ---------- ---- ---
----- ------ - ----
------- -
----------------- -----
------ -----
-------- -----
----------- -------
-
----- -
------- -----
-
----- -- -
---------- -----
-
----- - -
---------- -----
-
-
-- --------------
----- ---------- - ----------------------------
----------------------------
-- ----- --
----- --- - -- -- -
------
--------
--- --------- ---- --- ---
------ -------------------------- ------- --------------------- -- --
---------
------
---- -------------------
---------- -----------
------
---- -----------------
-------- ----------
-------- ----- ----- --- ----- ----------- ---------- ----- ------- -- -------- ------- ------- ---- --------- ----
------
-------
-------
-
-- -- ----- ---- --- --- ----- ---
-------------------- --- --------------------------------总结
glamor-raw-css 是一个非常灵活和可重复使用的 npm 包，它允许你在 JavaScript 中使用原生 CSS。这使得在前端开发中创建和应用样式变得更加简单。在本文中，我们学习了 glamor-raw-css 的用法，并提供了一个完整的示例代码用于参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dac3a