css 我如何使材料ui容器有完整的宽度和高度？

a0zr77ik 于 2023-01-27 发布在其他

关注(0)|答案(6)|浏览(122)

我试图将React项目中的一个页面 Package 在一个材质UI容器中，但是它用这些奇怪的边距挤压了我所有的内容。

但我希望它看起来像这样的全宽：

还没有找到任何其他资源解释如何改变容器的宽度。有人有任何变通办法吗？我试图调整容器的宽度为100vw，但它对我的CSS没有响应。以下是我的代码：

////BUY PAGE

import React from 'react';

import Container from '@mui/material/Container';
import AppBar from '../../components/AppBar/AppBar';
import Footer from '../../components/Footer/Footer';

import './Buy.css';

const Buy = () => {
    return (
        <Container>
            <AppBar />
            <Footer />
        </Container>
    );
};

export default Buy;

////CSS

.buy-container {
    overflow-y: hidden;
    width: 100vw;
}

css

来源：https://stackoverflow.com/questions/70238818/how-do-i-make-material-ui-container-have-full-width-and-height

6条答案

按热度按时间

9avjhtql1#

您应该能够通过将Container的maxWidth属性设置为false来获得所需的结果，例如：

<Container maxWidth={false}>
        <AppBar />
        <Footer />
    </Container>

编辑：maxWidth属性决定了容器的最大宽度。容器宽度随着屏幕的大小而增长。通过将其设置为 false，您可以禁用 maxWidth 属性。
https://mui.com/api/container/

赞(0）回复(0）举报 2023-01-27

g52tjvyc2#

您需要在<Container/>组件中添加maxWidth={false}和disableGutters属性。此外，您还应该包含<CssBaseline/>组件以重置浏览器的CSS。

示例：

<>
    <CssBaseline />
    <Container maxWidth={false} disableGutters>
      {children}
    </Container>
</>

容器API

| 姓名|类型|默认值|说明|
| - ------|- ------|- ------|- ------|
| 最大宽度|"xs"、"sm"、"md"、"lg"、"xl"、假、字符串||确定容器的最大宽度。容器宽度随屏幕大小而增长。设置为false可禁用maxWidth。|
| 禁用装订线|布尔|假的|如果true，则删除左右填充。|

赞(0）回复(0）举报 2023-01-27

fv2wmkja3#

在更改断点之前，应避免设置自定义容器宽度。
否则，您可以使用自定义div元素或Box组件。

// makeStyles
const useStyles = makeStyles(() => ({
  root: {
    height: '100%',
    overflow: 'hidden',
    width: '100%'
  },
}));

// styled
const LayoutContainer = styled('div')(() => ({
  height: '100%',
  overflow: 'hidden',
  width: '100%'
}));

赞(0）回复(0）举报 2023-01-27

r7s23pms4#

我想看一下覆盖标准的全局css变量（见这里）：
材质文档建议使用这种方式，或者使用样式替代，这可能是您的另一个选择。

.MuiContainer-root {
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

仅供参考-我从“root”下的Container portion of the docs中获得了全局css名称，以防您没有看到它。

赞(0）回复(0）举报 2023-01-27

mqxuamgl5#

我会在<Box>/<Appbar>中使用具有背景颜色的<Container>，例如：

<Box sx={{ bgcolor: 'black'}}>
  <Container>
    My content
  </Container>
</Box>

赞(0）回复(0）举报 2023-01-27

xt0899hw6#

minHeight：“100%”在那种情况下对我很有效

赞(0）回复(0）举报 2023-01-27

我来回答

css 我如何使材料ui容器有完整的宽度和高度？

6条答案

示例：

容器API

相关问题

热门标签

最新问答