Question

Material UI是一组React Components，以我迄今为止看到的最佳方式实现Google的Material Design。

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

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

Answer 1

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

https://www.muicss.com/

希望这有帮助

Answer 2

性能（特别是在移动设备上）是rather poor，因为大多数动画都是有状态的，需要与JS线程进行通信。
由于内联样式，一般缺少移动支持和响应能力，请参阅here
Material UI没有CSS，所有样式都是Inline。为单个浮动操作按钮生成的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>

Answer 3

为先前的贡献提供背景：

＆＃34; Material UI没有CSS，所有样式都是内联的＆＃34;
- 内联样式意味着难以管理，也没有CSS缓存
＆＃34;不适合移动设备＆＃34;
- 有时＆＃34;涟漪＆＃34;鼠标按下/触摸开始动画两次。这会导致性能下降和UX问题。
＆＃34;由于内联样式，一般缺乏移动支持和响应能力＆＃34;
- 根据某些测试，对话框不会扩展到适当的数量。显然是在最近的＆＃34; dev＆＃34;分支。

尝试回馈社区：）

仅使用Material UI React Components的CSS

3 个答案: