这些功能将改变你使用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,你只需做以下工作。
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的体验以及你想与社区分享的任何有趣的事实。