React material-ui响应式布局

Question

我正在尝试在我的React应用程序中使用material-ui。这些组件非常棒，但似乎它们并不是为响应式设计而设计的。例如，我想在主页中实现抽屉式导航组件，就像这样：

        <div>
            <AppBar
                title="My App"
                iconClassNameRight="muidocs-icon-navigation-expand-more"
                onLeftIconButtonTouchTap={this.handleToggle}
            />
            <TextField
                hintText="Hint goes here"
                floatingLabelText="Enter your Note here..."
                multiLine={true}
                fullWidth={true}
                rows={2}
            />
            <Drawer
                docked={false}
                open={this.state.open}
                onRequestChange={(open) => this.setState({open})}
            >
                <MenuItem>One</MenuItem >
                <MenuItem>Two</MenuItem >
            </Drawer>
        </div>
    );

当我在手机上加载它时，它的大小并没有像我希望的那样进行调整。是否有办法仅使用material-ui使其响应式？如果不行，我可以使用Bootstrap或其他响应式包吗？

谢谢， -Jim

- jbambrough

---

Material-UI演示网站在相同环境下是如何工作的？抽屉本身不需要那么大的宽度并且适合移动设备，不是吗？其他组件如应用栏呢？ - oklas

是的，material-ui网站本身似乎是响应式的。但很难确定他们做了什么来使其响应式。我在源代码中没有看到任何引用Bootstrap库的参考。 - jbambrough

所以这就是幸福，没有Bootstrap。让大家知道，响应式布局是通过CSS和JS实现的（而不是Bootstrap）。 - oklas

@jbambrough 你使用的是 material-ui 的哪个版本，4 还是 5？ - hotcakedev

Answer 1

我为此提供了一个完整的示例，它是完全响应式的，在codesandbox中。

您应该将主要页面放在这样的框中：

   <Box
            component="main"
            sx={{ flexGrow: 1 }}
            className={classes.content}
            style={{ width: "calc(100% - 240px)" }}
          >
<TextField
                hintText="Hint goes here"
                floatingLabelText="Enter your Note here..."
                multiLine={true}
                fullWidth={true}
                rows={2}
            />
</Box>

这个主题比我在这里写的所有代码都要大。

- Samira

Answer 2

Material UI 还有一个响应式抽屉，这里是文档链接

https://mui.com/components/drawers/

- Sarang Sami

Answer 3

听起来你需要 material-ui useMediaQuery 这个组件：https://mui.com/components/use-media-query/

以下是我在我的应用程序中使用函数组件设置它的摘要：

1) 创建两个常量，一个是 useMediaQuery 用于检测当前屏幕分辨率，第二个是 useState，我们将使用它来根据屏幕分辨率将抽屉打开或关闭

2) 实现 useEffect 钩子，以便在 useMediaQuery 常量更改值时重新渲染。如果大于中等屏幕分辨率，则将侧边栏设置为打开状态。否则，将其转换为关闭位置。

3) 您应该能够通过调整浏览器大小并查看其响应式地打开和关闭来在浏览器中测试此功能。这个相同的 useMediaQuery 过程可以用于任何 material ui 组件，使其对屏幕大小响应。

希望这有所帮助！

const Main = observer((): JSX.Element => {
/* You can use standard pixel sizes (e.g. 900px) if desired instead of sm, md, lg */
const md = useMediaQuery(theme.breakpoints.up('md')); 
const [appBarOpen, setAppBarOpen] = useState(true);


/* Collapse the side drawer if the screen size is medium or lower. Have it open 
if screen size is above medium */
useEffect(() => {
    setAppBarOpen(md === false ? false : true);
}, [md]);

return(
    <Drawer
        variant="permanent"
            <Typography variant="h4">Menu</Typography>
        <SideBar open={appBarOpen} />
    </Drawer>;
    )

- Colegit