当我看到 MUI 的默认 AppBar 时,它​​的子项看起来非常不同,尤其是在宽屏幕尺寸下。徽标位于完全左侧,其他导航位于右侧。所以项目看起来彼此相距甚远。

我想要做的是像 Bootstrap 的组件,我想应用如下图所示的最大宽度。如何在 AppBar 中设置容器?

reactjs - 如何在 React Material UI AppBar 组件中设置容器?-LMLPHP

这是我尝试过的。

<AppBar>
    <ToolBar>
        <Grid
             container
             style = {{ maxWidth: 1170 }}
         >
         <Typography>Logo</Typography>
         </Grid>
    </ToolBar>
</AppBar>

但它不起作用......

最佳答案

您可以尝试使用

<CssBaseline />
<AppBar position="static">
    <Container maxWidth="lg">
        <ToolBar>
            <Typography>Logo</Typography>
        </ToolBar>
    </Container>
</AppBar>

关于reactjs - 如何在 React Material UI AppBar 组件中设置容器?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51568661/

10-11 21:51