如何基于Material UI中的断点更改按钮道具

Question

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

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

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

我曾考虑过创建一个“宽度检测器”，然后使用一些JS逻辑相应地更改按钮元素的道具，但这似乎只是一个解决方案。

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

Answer 1

Material UI Docs中不推荐使用IOBufferMemoryDescriptor HOC。

这是目前有效的方法，结合了withWidth和useTheme。

编辑：此处实际上并不需要useMediaQuery，因为useTheme自动将其作为参数提供。

useMediaQuery

Answer 2

Material UI Docs:

  

有时您可能想根据断点值更改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;