React Material-ui 响应式布局

Question

我正在尝试在我的 React 应用程序中使用 material-ui。 这些组件很棒，但它们似乎并不是为了响应而设计的。 例如，我正在尝试在我的主页中实现 Drawer 组件，如下所示：

        <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 或其他一些包进行响应？

谢谢，-吉姆

Answer 1

以下是您将找到所有需求的示例项目。
来源 ：

https://github.com/rafaelhz/react-material-admin-template

演示 ：

https://rafaelhz.github.io/react-material-admin-template/#/form?_k=09zo2h

Answer 2

Material ui 也有一个响应式抽屉，这里是文档的链接

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

Answer 3

听起来您需要材料-ui useMediaQuery： https ://mui.com/components/use-media-query/

我如何使用功能组件在我的应用程序中设置它的总结：

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

2)实现了一个 useEffect 挂钩以在 useMediaQuery 常量更改值时重新渲染。 如果大于中等屏幕分辨率，请将侧边栏设置为打开。 如果没有，请将其转至关闭位置。

3）您应该能够在浏览器中测试这一点，方法是让您的浏览器变得越来越小，并看到它响应地打开和关闭。 相同的 useMediaQuery 过程可用于任何材质 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>;
    )

Answer 4

我为它做了一个完整的例子，它在代码盒<\/a>中完全响应

你应该把你的主页放在这样的盒子上：

   <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>