材质UI大小混乱

Question

在尺寸文档中，它说"使用"宽度"one_answers"高度"实用程序可以轻松地使元素与其父元素一样宽或一样高(相对于其父元素(&"；。

我意识到，文档系统部分的几乎所有示例，示例大多与Box组件有关。我在Button元素上尝试了一些技巧。不出所料，一切都没有改变。

Answer 1

对于那些刚接触材料(实际上是UI(的人来说，这有点棘手。首先，他们使用Box，因为根据Box文档，他们说Box是使用样式化的材料(而不是样式化的组件("生成的"；Box组件封装了在@materialui/system中公开的所有样式函数。它是使用@material-ui/core/styles的styled((函数创建的">

所以，我去了github和material core存储库，了解如何做到这一点。

export const styleFunction = css(
compose(
borders,
display,
flexbox,
grid,
positions,
palette,
shadows,
sizing,
spacing,
typography,
),
);

css和compose也从@material-ui/system导出

然后在文件的末尾；

const Box = styled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunction);
export default Box;

这里使用的styled来自experimentalStyled包(内部包(，但这并不重要。因为，Material的家伙正在导出一个样式化的函数/钩子供我们使用。

import { styled } from "@material-ui/core/styles";

我为Button组件尝试了这个样式的函数。

const CustomButton = styled(Button)(sizing);

是的，它起作用了。我现在可以应用材料UI的系统部分中定义的神奇造型技能。

对于那些想使用此方法而不是其他方法的人。我也推了一个npm包。

材料ui型挂钩