只使用 CSS of Material UI React Components

Question

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

现在我有一个项目，不幸的是我无法使用 React.js。但我想使用该项目包含的出色 CSS。

有什么方法可以将样式嵌入到我现有的项目中吗？

Answer 1

我不确定这是否实现了 material ui 框架的完全相同的组件，但我已经将它用于需要 uire material 设计，这似乎就是您要找的东西。此外，从 Material UI 的来源来看，似乎没有简单的方法来提取样式表。

https://www.muicss.com/

希望对您有所帮助

Answer 2

性能（尤其是在移动设备上）是 rather poor 因为大多数动画是有状态的并且需要与 JS 线程通信。
由于内联样式，总体上缺乏移动支持和响应能力，请参阅 here
MaterialUI没有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

为之前的贡献提供背景：

"Material UI has no CSS, all styles are inline"
- 内联样式意味着难以管理，也没有 CSS 缓存
"not mobile friendly"
- 有时 "ripple" 动画会在鼠标按下/触摸启动时触发两次。这些会导致性能下降和用户体验问题。
"due to inline styles, mobile support and responsiveness in general are lacking"
- 根据一些测试，对话框没有扩展到适当的数量。显然已在最近 "dev" 个分支中修复。

努力回馈社区:)

只使用 CSS of Material UI React Components

Only use the CSS of Material UI React Components

css

reactjs

material-design

material-ui