Material-UI 尺码混乱

Question

在 sizing 文档中，它说“使用宽度和高度实用程序可以轻松地使元素（相对于其父元素）一样宽或一样高。”。

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

Answer 1

对于 material（实际上是 UI）的新手来说，这有点棘手。首先，他们使用 Box，因为根据 box documentation they said box generated using material styled (not the styled-components) "The Box component packages all the style functions 在 @material-ui/system 中公开。它是使用 @material-ui/core/styles."

的 styled() 函数创建的

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

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 伙计们正在导出样式 function/hook 供我们使用。

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

我为 Button 组件尝试了这种样式化的功能。

const CustomButton = styled(Button)(sizing);

adn 是的，它起作用了。我现在可以应用 material UI.

的 system 部分中定义的神奇造型技巧

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

material-ui-styled-hook

Material-UI 尺码混乱

Material-UI Sizing Confusion

theming

sizing

material-ui