[英]Change from widthWidth to useWidth on MUI v5 ReactJS
I'm working on a project that uses MUI as UI Library for the React app.我正在开发一个使用 MUI 作为 React 应用程序 UI 库的项目。 Today I started the migration to v5, and I'm facing a problem with all the functional components that were wrapped by
withWidth()
.今天我开始迁移到 v5,我面临着所有由
withWidth()
包装的功能组件的问题。
The official documentation says something about a new Hook developed under the name useWidth
, and I don't know how my function should get the property width from that hook.官方文档说了一些关于在名称
useWidth
下开发的新 Hook 的useWidth
,我不知道我的函数应该如何从该钩子获取属性宽度。
My functional component is this one:我的功能组件是这样的:
import { GridList, Grid } from "@material-ui/core";
import withWidth, { isWidthUp } from "@material-ui/core/withWidth";
import {
ExtraTile,
ExtraDiv,
ExtraDescriptionText,
ExtraPriceText,
} from "components/Extras/components/ExtraTiles";
import {
SwitchExtra,
SwitchExtraImage,
SwitchTextDiv,
SwitchDiv,
} from "components/Extras/components/SwitchExtraTiles";
function ExtraSwitchComponent(props) {
return (
<GridList
cellHeight={isWidthUp("md", props.width) ? 100 : 200}
cols={1}
spacing={0}
>
<ExtraTile
style={{ cursor: "auto" }}
key={props.type + "-tile"}
cols={1}
component="div"
>
<ExtraDiv>
<Grid
container
direction="row"
justifyContent="space-between"
style={{ height: "100%" }}
>
<Grid
item
xs={isWidthUp("md", props.width) ? 4 : 12}
style={{ height: isWidthUp("md", props.width) ? "100%" : "33%" }}
>
<SwitchExtraImage
src={props.imageUrl}
alt={props.imageAlt}
topRight={isWidthUp("md", props.width) ? "0px" : "10px"}
bottomLeft={isWidthUp("md", props.width) ? "10px" : "0px"}
/>
</Grid>
<Grid
item
xs={isWidthUp("md", props.width) ? 4 : 12}
style={{ height: isWidthUp("md", props.width) ? "100%" : "33%" }}
>
<Grid
container
alignItems="center"
style={{ height: "100%", width: "100%" }}
>
<Grid item xs={12} style={{ width: "100%", height: "50%" }}>
<ExtraDescriptionText>
{props.description}
</ExtraDescriptionText>
</Grid>
<Grid item xs={12} style={{ width: "100%", height: "50%" }}>
<ExtraPriceText>
{"+ " + props.price + props.priceDescriptor}
</ExtraPriceText>
</Grid>
</Grid>
</Grid>
<Grid
item
container
xs={isWidthUp("md", props.width) ? 4 : 12}
style={{ height: isWidthUp("md", props.width) ? "100%" : "33%" }}
alignItems="center"
justify="center"
direction="column"
>
<SwitchExtra
checked={props.selected}
onChange={props.setSelected}
color="primary"
/>
</Grid>
</Grid>
</ExtraDiv>
</ExtraTile>
</GridList>
);
}
export default withWidth()(ExtraSwitchComponent);
Any info on how to face this problem is welcome.欢迎提供有关如何解决此问题的任何信息。
You can also drop useWidth
/ withWidth
usage and use sx
prop with responsive values instead:您还可以删除
useWidth
/ withWidth
用法,而是使用带有响应值的sx
属性:
<Grid
sx={{
height: {
xs: '30%',
md: '100%',
}
}}
/>
EDIT: If you want to conditionally change the props based on the breakpoint:编辑:如果您想根据断点有条件地更改道具:
function useIsWidthUp(breakpoint) {
const theme = useTheme();
return useMediaQuery(theme.breakpoints.up(breakpoint));
}
function useIsWidthDown(breakpoint) {
const theme = useTheme();
return useMediaQuery(theme.breakpoints.down(breakpoint));
}
function MyComponent() {
const isMdUp = useIsWidthUp("md");
const isMdDown = useIsWidthDown("md");
return (
<SwitchExtraImage topRight={isMdUp ? "0px" : "10px"} {...} />
)
}
This lib came in handy for getting the hook I needed https://www.npmjs.com/package/react-use这个库派上用场来获取我需要的钩子https://www.npmjs.com/package/react-use
You can utilize their createBreakpoint
hook like so:您可以像这样使用他们的
createBreakpoint
钩子:
import { createBreakpoint } from "react-use";
const useBreakpoint = createBreakpoint({
xl: 1563,
lg: 1200,
md: 900,
sm: 600,
xs: 0,
});
const someComponent = ()=>{
const breakpoint = useBreakpoint();
let isMobile = breakpoint === "xs";
return <p>The user is on a mobile device: {isMobile}</p>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.