React Material-ui 响应式布局

Posted 2023-02-21

【中文标题】React Material-ui 响应式布局

【英文标题】：React material-ui responsive layout

【发布时间】：2017-12-17 10:58:06

【问题描述】：

我正在尝试在我的 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 或其他一些包来实现响应？

谢谢， -吉姆

【问题讨论】：

material-ui 演示站点如何在相同环境下工作？抽屉本身没有那么大的宽度，适合移动不是吗？像 appbar 这样的其他组件呢？

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

所以这是没有引导程序的幸福。让你知道响应是通过css和js（而不是bootstrap）实现的

@jbambrough 你用什么版本的material-ui，4还是5？

【参考方案1】：

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

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

【参考方案2】：

听起来你需要material-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>;
    )