这些功能将改变你使用Material UI的工作方式
作为一名前端工程师，Material-UI是我最喜欢的React组件的造型选项。它圆滑的设计和优雅的风格使它从众多的产品中脱颖而出。
也就是说，我最近在实践中使用Material-UI时发现了一些有趣的事实。在这篇文章中，我想把这些东西带到你面前，因为我发现它们非常有趣。
前提条件:熟悉Material-UI的基础知识将有利于完全掌握本文的内容。
1.自动改变颜色
无论你是建立一个网站还是一个移动应用程序，拥有一个黑暗模式对现代应用程序来说是至关重要的。你不会想让用户在晚上使用应用程序时，用白色的屏幕蒙蔽他们。
用Material UI实现黑暗模式是非常容易的，因为它有两个调色板，分别是光明和黑暗主题。你可以通过将类型设置为暗色来切换到暗色主题。
const darkTheme = createMuiTheme({
我们大多数人都知道这个功能。所以你们中的一些人可能会想，它有什么特别之处？
比方说，你有一个前景为黑色的按钮。在这样的情况下，如果你将应用主题偏好改为深色，其中背景颜色也默认为黑色，Material UI会调整按钮的颜色，使其与背景形成对比。
让我再解释一下。
如果一个元素（例如：按钮）的背景和前景颜色是黑色的，Material UI会相应地调整按钮的前景颜色。
很神奇，不是吗？
因为这个功能，我们不必太担心我们的应用程序在黑暗模式下的非对比元素。
需要注意的一点:如果你强行覆盖按钮颜色，这种自动调整就不会发生。
2.互操作性
Material UI本质上提供了一个基于JSS的样式设计系统来设计你的组件。然而。
你是否知道Material UI可以与造型机制相结合，如Plain CSS、Global CSS、Styled-Components、CSS模块、Emotion等？
是的，这是有可能的!你可以在这里找到这方面的详细信息。
只是为了给你一个概述，Material UI并不限制你只使用基于JSS的造型。如果你喜欢使用风格化组件或CSS模块，你可以自由地在Material UI中使用它。在我看来，这种灵活性对于扩大造型库的使用范围是非常重要的。
如果你要把基于JSS的造型与Material UI结合起来，有几件事你应该记住。
1.控制优先级
JSS通常将样式注入到中。为了确保你的自定义样式不会被覆盖，你需要定义CSS的注入顺序，当你使用普通CSS、全局CSS、样式化组件、CSS模块等。
让我们看一个例子，当你把样式化组件和Material UI结合起来时，如何改变CSS的注入顺序。
import { StylesProvider } from '@material-ui/core/styles';
另一种覆盖Material UI样式的方法是对你的自定义样式使用！！！重要关键字。然而，这种方法可能看起来没有改变注入顺序那么干净。
2.门户
门户提供了一种将子节点渲染到存在于DOM层次之外的DOM节点的方法。然而，如果你将Material UI与有样式的组件结合起来，由于样式的范围，通过Portal渲染的组件将不会有适当的样式渲染。
Material UI也为这个问题提供了一个解决方案。
import React from 'react';
类名必须被传递给通过门户渲染的菜单。你可以在Material UI文档中找到完整的参考。
3.在RTL和非RTL之间切换
Material UI有能力支持RTL语言，如阿拉伯语、波斯语等。如果你已经用Material UI工作了一段时间，你可能已经知道了。
然而，你是否知道，在RTL和非RTL之间切换使用Material UI是非常容易的？
如果你想让一个特定的规则集选择不使用RTL，而其他部分使用RTL，你只需做以下工作。(来源：Material-UI文档)
import React from 'react';
当你的整个应用程序使用RTL时，如果你想让一个元素成为LTR，你只需为该特定样式使用 "flip: false"。
4.与设计工具包的整合
随着最近版本的发布，Material UI已经启用了对各种设计套件的支持。其中一些是这样的。
他们的目的是通过将这些设计工具包与Material UI的整合来实现最大的开发者效率。
Material UI已经承诺在这些工具之间保持功能的平等性。
这些设计套件的整合是Material UI的一个付费功能。不过，它只需要一次性付款。一旦购买，你可以终生使用它。
5.非风格化的组件
Material UI的Unstyled组件是一个即将推出的功能，但绝对值得关注。
什么是非风格化组件？
假设你需要在你的应用程序中拥有一个完全定制的设计，但你也需要Material UI所提供的好处。在这种情况下，覆盖Material UI提供的所有样式会很麻烦，因为你必须覆盖这么多样式。
在即将发布的版本中，Material UI提供了一个解决方案，即提供非风格化的组件。非风格化组件的gzipped重量为5.2KB，而风格化组件的gzipped则为26KB。因此，如果你需要一个完全定制的设计和主题，这对你的包的大小也是一个改进。
你可以使用以下命令下载Material UI的Unstyled包。
yarn add @material-ui/unstyled@next
如果你想导入无风格包，在除少数组件外的所有组件上使用你的自定义主题，你可以轻松做到。你所要做的就是在你的Unstyled组件上使用stylled()，在少数组件上应用Material UI核心样式。
这将把未定型组件转换为Material UI核心的定型组件。然而，这仍然是在alpha版本。如果你有兴趣了解Material UI即将推出的功能，你可以关注这个空间。
总结
Material UI有很多很酷的功能，也有很多有趣的未来功能。我发现这些功能中的大多数都非常有用，尤其是像自动换色这样的功能。让我知道你对Material UI的体验以及你想与社区分享的任何有趣的事实。
谢谢你的阅读!
用Bit构建和分享React组件
比特是一个超可扩展的工具，可以让你用_独立_编写、版本和维护的组件创建_真正的_模块化应用程序 。
用它来构建模块化的应用程序和设计系统，编写和交付微型前端，或者简单地在应用程序之间共享组件。
一个带有基于Material UI的组件的远程Bit范围，每个源码都是独立控制和共享的
了解更多
5个你可能错过的React Material UI功能最初发表在Medium上的Bits and Pieces上，人们通过强调和回应这个故事继续对话。
