如何解决Material-UI大小混乱
在sizing文档中,它说:“使用width和height实用程序轻松地使元素的宽度或高度(相对于其父元素)相同。”
我意识到几乎所有文档的系统部分中的示例,大多数示例与Box组件相关。我从那里尝试了Button元素上的一些技巧。预计什么都不会改变。
解决方法
对于那些在材料(实际上是UI)方面是新手的人来说,这有点棘手。首先,他们使用Box,因为根据box documentation,他们说box是使用样式化的材质(不是样式化的组件)生成的:“ Box组件打包了@ material-ui / system中公开的所有style functions。它是使用@ material-ui / core / styles的styled()函数创建的。“
因此,我去了github和材料核心存储库以了解如何做到这一点。
export const styleFunction = css(
compose(
borders,display,flexbox,grid,positions,palette,shadows,sizing,spacing,typography,),);
还可以从@material-ui/system
导出css和compose
然后在文件末尾;
const Box = styled(BoxRoot,{ shouldForwardProp },{ muiName: 'MuiBox' })(styleFunction);
export default Box;
此处使用的styled
来自experimentalStyled
程序包(内部程序包),但这无关紧要。库兹,Materials家伙导出了样式化的函数/挂钩供我们使用。
import { styled } from "@material-ui/core/styles";
我尝试了Button组件的样式化功能。
const CustomButton = styled(Button)(sizing);
adn是的,它起作用了。现在,我可以应用在材料UI的系统部分中定义的神奇的样式技巧。
对于那些想用它代替其他方法的人。我也推了一个npm包。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。