只使用 Material UI React Components 的 CSS答案

【问题标题】：Only use the CSS of Material UI React Components只使用 Material UI React Components 的 CSS
【发布时间】：2016-01-27 22:50:43
【问题描述】：

Material UI 是一组 React 组件，它以迄今为止我见过的最好的方式实现了 Google 的 Material Design。

现在我有一个项目，很遗憾我无法使用 React.js。但我想使用项目包含的优秀 CSS。

有没有办法将样式嵌入到我现有的项目中？

【问题讨论】：

标签： css reactjs material-design material-ui

【解决方案1】：

我不确切知道这是否实现了 Material ui 框架的完全相同的组件，但我已经将它用于需要 Material Design 的应用程序，它似乎正是您正在寻找的。此外，从 Material UI 的来源来看，似乎没有简单的方法来提取样式表。

https://www.muicss.com/

希望对你有帮助

【讨论】：

【解决方案2】：

性能（尤其是在移动设备上）是rather poor，因为大多数动画都是有状态的，需要与 JS 线程通信。
由于内联样式，缺乏移动支持和响应能力，请参阅here
Material UI 没有 CSS，所有样式都是内联的。为单个浮动操作按钮（带有加号图标）生成的 HTML 如下所示：

<button style="border:10px;background:none;box-sizing:border-box;display:inline-block;
  font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0);
  cursor:pointer;text-decoration:none;outline:none;transform:translate3d(0, 0, 0);
  vertical-align:bottom;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  position:relative;height:56px;width:56px;padding:0;overflow:hidden;
  background-color:#ff4081;border-radius:50%;text-align:center;-webkit-appearance:button;" 
        tabindex="0" type="button" data-reactid=".0.1.0.0.1.1.1.0.0">
  <div data-reactid=".0.1.0.0.1.1.1.0.0.0">
    <div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;" 
         data-reactid=".0.1.0.0.1.1.1.0.0.0.1">
      <svg style="display:inline-block;height:56px;width:24px;transition:all 450ms 
        cubic-bezier(0.23, 1, 0.32, 1) 0ms;line-height:56px;fill:#ffffff;color:#ffffff;
        -webkit-user-select:none;" viewBox="0 0 24 24" data-reactid=".0.1.0.0.1.1.1.0.0.0.1.1:$/=10">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" data-reactid=".0.1.0.0.1.1.1.0.0.0.1.1:$/=10.0">
        </path>
      </svg>
    </div>
  </div>
</button>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@AtheistP3ace，对不起，现在更好了吗？这是我在 StackOverflow 上的第一个答案。现在我已经准备好针对 Angular2 没有 NPM 开发的相关答案，但我被阻止了 (stackoverflow.com/questions/35598167/…)

【解决方案3】：

为之前的贡献提供上下文：

“材质 UI 没有 CSS，所有样式都是内联的”
- 内联样式意味着难以管理，也没有 CSS 缓存
“不适合移动设备”
- 有时“波纹”动画会在鼠标按下/触摸开始时触发两次。这些会导致性能下降和用户体验问题。
“由于内联样式，缺乏移动支持和响应能力”
- 根据某些测试，对话框没有展开到适当的数量。显然已在最近的“开发”分支中修复。

努力回馈社区:)

【讨论】：