4

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

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

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

在此处输入图像描述

4

3 回答 3

3

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

https://www.muicss.com/

希望这可以帮助

于 2015-10-28T08:49:52.477 回答
2
  • 性能（尤其是在移动设备上）相当差，因为大多数动画都是有状态的并且需要与 JS 线程通信。
  • 由于内联样式，通常缺乏移动支持和响应能力，请参见此处
  • 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>
于 2016-02-15T12:39:43.223 回答
1

为之前的贡献提供背景：

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

试图回馈社会:)

于 2016-03-02T03:53:08.310 回答