如何根据 Material UI 中的断点更改按钮道具

Question

我正在尝试为不同的屏幕尺寸更改 material-ui 按钮上的变体和/或大小。例如，在“sm”断点下方不使用变体或 size="small"，在“sm”上方使用变体="outlined"和/或 size="large"。

通常，我会使用 withStyles 并创建一个带有 theme.breakpoints 的样式，以通过使用 className 将样式应用于元素来影响更改，但是，variant 和 size 是道具。

在阅读了 api，搜索网络并广泛地摆弄之后，我似乎无法找出任何直接的方法来根据视口宽度更改道具。

我想过创建一个“宽度检测器”，然后使用一些 JS 逻辑来相应地更改按钮元素的道具，但这似乎离解决方案有点远。

所以我在这里询问是否有更简单的解决方案。谢谢。

Answer 1

根据Material UI DocswithWidth不推荐使用 HOC 。

这是现在有效的方法，结合useTheme和useMediaQuery。

编辑： useTheme这里并不是真正需要的，因为它会useMediaQuery自动将其作为参数提供。

// import { useTheme } from "@material-ui/core/styles";
import { useMediaQuery } from "@material-ui/core";
...

function ResponsiveButton() {
  // const theme = useTheme();
  // const isSmallScreen = useMediaQuery(theme.breakpoints.down("xs"));
  const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down("xs"));

  const buttonProps = {
    variant: isSmallScreen ? "text" : "outlined",
    size: isSmallScreen ? "small" : "large"
  };
  return (
    <Button {...buttonProps} color="primary">
      Responsive Button
    </Button>
  );
}

export default ResponsiveButton;

Answer 2

材质 UI 文档：

有时您可能想根据断点值更改 React 渲染树。我们为此用例提供了一个withWidth()高阶组件。

withWidth将一个width属性注入您的组件，让您可以访问当前断点值。这允许您根据屏幕大小呈现不同的道具或内容。

function ResponsiveButton({ width }) {
  // This is equivalent to theme.breakpoints.down("sm")
  const isSmallScreen = /xs|sm/.test(width);
  const buttonProps = {
    variant: isSmallScreen ? "text" : "outlined",
    size: isSmallScreen ? "small" : "large"
  };
  return (
    <Button {...buttonProps} color="primary">
      Responsive Button
    </Button>
  );
}

export default withWidth()(ResponsiveButton);

Answer 3

这是我的实现

import Button from "@material-ui/core/Button";
import { useTheme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useEffect } from "react";

const ResponsiveButton = (props) => {
  const theme = useTheme();
  const desktop = useMediaQuery(theme.breakpoints.up("lg"));
  const tablet = useMediaQuery(theme.breakpoints.up("sm"));
  const mobile = useMediaQuery(theme.breakpoints.up("xs"));

  const sizes = () => {
    if (desktop) return "large";
    if (tablet) return "medium";
    if (mobile) return "small";
  };

  return <Button {...props} size={sizes()}/>;
};
export default ResponsiveButton;