Ember.js 是一个用于构建 web 应用程序的 JavaScript 前端框架，而 styled-components 是一个让你使用 CSS-in-JS 的工具库。在这篇文章中，我们将会介绍 npm 包 ember-styled-components 的用法，以及如何将它应用到 Ember.js 项目中。
安装
要使用 ember-styled-components，首先需要在项目中安装它。可以利用 npm 或者 yarn 包管理器进行安装。进入项目根目录，在终端中运行以下命令：
npm install --save ember-styled-components
这将会安装 ember-styled-components 并将其作为依赖项添加到 package.json。
用法
一旦安装了 ember-styled-components，我们可以将其用于 Ember.js 应用程序和组件中。需要添加的第一条代码是在 app.css 中导入 styled-components 样式组件：
@import 'styled-components';
然后可以创建样式组件并将其添加到 Ember.js 组件中。下面是一个简单的例子：
-- -------------------- ---- -------
-- ------------------------------
------ ------ ---- --------------------
----- -------- - --------------
----------------- -----
------- --- ----- -----
------ -----
-------- --- -----
---------- -----
------- --------
------- -
----------------- -----
-
--
------ ------- ------------------------
-------- ------
-------- -
------------- -
------------------- -----------
-
--
------- ------------------------
------------ --------------- --------------------- -----------------
---
-- ----------------- ----------------- ----
--------- ---------
---在上面的代码中，我们定义了一个新的 styled-components 样式组件MyButton。可以在应用程序的任何组件中使用该组件，如上面的示例所示。需要注意的是，使用样式组件时，在调用组件的地方需要使用组件名称的小写字符串形式，而不是我们在定义时使用的大写字母形式。
此外，本例使用了两个全局对象Ember和styled-components。首先，我们将MyButton样式组件借助import语句从 styled-components 中导入。然后，我们将它作为一个属性添加到组件中，使用的是 Ember 的“装饰器”。
结论
使用 npm 包 ember-styled-components，可以轻松地在 Ember.js 应用程序中使用 CSS-in-JS 编码方式，这对于管理应用程序中的样式和可重用组件非常有用。当然，这只是本文的一个例子，你可以使用更多的 styled-components 样式组件，例如MyButton，来使你的应用程序变得更具特色和可读性。
示例代码
-- -------------------- ---- -------
-- ------------------------------
------ ------ ---- --------------------
----- -------- - --------------
----------------- -----
------- --- ----- -----
------ -----
-------- --- -----
---------- -----
------- --------
------- -
----------------- -----
-
--
------ ------- ------------------------
-------- ------
-------- -
------------- -
------------------- -----------
-
--
------- ------------------------
------------ --------------- --------------------- -----------------
---
--------- ---------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730781e8991b448e930c