在 React js 中加载 Muicss 样式答案

【问题标题】：Loading Muicss styles in React js在 React js 中加载 Muicss 样式
【发布时间】：2017-11-24 18:28:58
【问题描述】：

我正在尝试使用 Muicss 设置一个应用程序，以便在 React js 应用程序中设置我的组件样式。

下面是一个非常简单示例的代码，但是当我进入浏览器时，按钮没有样式，我不知道我是否遗漏了什么，我之前使用过 Material Design，我没有任何问题.

import React from 'react';
import Button from 'muicss/lib/react/button';

export default class Example extends React.Component {
  render() {
    return (
      <div>
          <Button variant="raised" color="danger">button</Button>
      </div>
    );
  }
}

如果我遗漏了一些东西，有人可以帮我找回吗？我使用 NPM 安装了库，在我的 node_modules 文件夹中，我可以看到 Muicss 库中的所有文件。

在控制台中没有错误或奇怪的东西，奇怪的是组件没有样式......

【问题讨论】：

标签： javascript css reactjs material-design

【解决方案1】：

要使用 MUI React，您必须在 HTML 有效负载中包含 MUI CSS 文件。它可以编译到您应用的 CSS 中或从 CDN 添加：

<link href="//cdn.muicss.com/mui-0.9.30/css/mui.min.css" rel="stylesheet" type="text/css" media="screen" />

（来源：MUICSS documentation）

【讨论】：

感谢您的宝贵时间，我还有一个问题...我没有使用 html 文件，所有 ara js，甚至我的“主页”页面都是 js 文件，所以我该如何添加CSS？在 cdn 的情况下，如果我的网络不允许我转到外部源，我需要在本地下载或加载 css 会怎样？
? 你不能在没有 HTML 文件的浏览器中查看网页，即使它只包含一个用于渲染 React 布局的 div。
是的，只需下载文件并从您自己的服务器上提供它
我添加了我的项目结构的截图，我的home文件是home.jsx文件
我还在 home.jsx 文件中添加了代码，所以当我打开浏览器时，我可以看到内容..

【解决方案2】：

我知道这是旧的，因为它没有提及它以供路人将来参考，它可以使用@import url("//cdn.muicss.com/mui-0.10.1/css/mui.min.css"); 导入到 scss 中

【讨论】：

【解决方案3】：

音乐版：0.10.2

使用Muicss Docs 的解决方案可以但不是很好，因为当开发人员更新muicss 并且不更新给定的链接时，一切都可能会毁掉，现在使用下面的解决方案变得非常非常好。

我有同样的问题，并通过将sass-loader 添加到 Webpack 来解决它，我也有 CSS Modules 所以在我的项目样式的根目录中，我如下所示：

/* root file of styles.scss */

:global {
  @import 'node_modules/muicss/lib/sass/mui';
}

使用此解决方案后，即使使用CSS Modules 使用散列类名称，我也给出了muicss 的全局名称，并且每个组件都运行良好。

【讨论】：