使AppBar从容器中流出-Material UI-React

Question

我正在将我的应用程序封装在一个最大宽度设置为false的MUI容器中。我在容器中有一个AppBar，我希望AppBar占据整个屏幕宽度，但容器强制使用paddingX属性，以防止AppBar向视口的末端延伸。你能帮我一下吗？

这是我的代码：

import * as React from 'react';
import {
Container,
AppBar,
Box,
Toolbar,
Typography,
Button,
} from '@mui/material';
import './style.scss';
export default function App() {
return (
<div>
<Container maxWidth={false} component="main">
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" className="extend-width">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
</Container>
</div>
);
}

CSS：

h1,
p {
font-family: Lato;
}
main.MuiContainer-root {
.extend-width {
position: relative;
width: 95vw;
left: calc(-47.5vw + 50%);
}
}

Stacklitz链接：链接

Container内部的AppBar应与容器外部的AppBar类似。

预期的输出是，类扩展宽度的任何东西都应该扩展到视口的末端。

谢谢。感谢您的帮助。

Answer 1

1. 解决方案是从容器中移除填充，而是在容器中使用另一个容器来用填充包裹项目并排除appbar。

2. 更多肮脏的选择是使用负利润：

.app-bar {
margin: 0 -24px; // Replace by theme.spacing or actual padding values
width: calc(100% + 48px); //100% + marginX
}