gpt4 book ai didi

reactjs - Material 用户界面 : use media query outside component

转载 作者:行者123 更新时间:2023-12-05 04:51:41 25 4
gpt4 key购买 nike

我正在使用 Material-UI 开发 React 应用程序.

是否有任何方法可以在组件主体外部以 React/Material-UI 方式使用媒体查询或确定视口(viewport)宽度?

我需要根据视口(viewport)大小为组件设置默认 Prop 。

目前,我正在使用 windows.innerWidth 处理它,如下所示。

const defaultProps = {
textVariant: window.innerWidth < 600 ? 'body1' : 'h4',
}

const Text = (props) => {
...
}

Text.defaultProps = defaultProps;

是否有任何 Material-UI 实用程序可用于根据视口(viewport)大小设置默认 Prop ?

最佳答案

没有。调整浏览器窗口大小时可以更改窗口宽度,这样将代码放在外面将在编译时计算 textVariant 值。使用 useMediaQueryuseWindowSize 时将监听 resize 事件并在运行时为您提供正确的 width 值。

您可以做的是将默认值存储为状态,并在窗口大小更改时更新该值。下面是最小的例子:

function useVariant(variant?: Variant) {
const [defaultVariant, setDefaultVariant] = useState<Variant>("h6");
const largeScreen = useMediaQuery("(min-width:600px)");

useEffect(() => {
if (largeScreen) {
setDefaultVariant("h5");
} else {
setDefaultVariant("h6");
}
}, [largeScreen]);

return variant || defaultVariant;
}

export default function Types(props) {
const variant = useVariant(props.variant);

return (
<Typography variant={variant}>
Resize window to see text size changed
</Typography>
);
}

现场演示

Edit Material demo (forked)

关于reactjs - Material 用户界面 : use media query outside component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66800658/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com