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包。

material-ui-styled-hook

material-ui sizing theming