我有一個具有 maxWidth 的網格元素，以便在大螢屏中顯示時具有水平邊距。我希望網格元素居中并且一個長段落應該與左側對齊。你會怎么做？我正在使用 MUI v5。謝謝你。
<Box
style={{
backgroundColor:"rgb(234, 237, 242)"
}}
>
<Grid container alignItems='center' justifyContent='center' maxWidth='md'>
<Grid item xs={12} md={12} justifyContent="center">
<Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{mb:4}}>
Nice title
</Typography>
<Typography sx={{ px: 4 }} paragraph>very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line.</Typography>
</Grid>
</Grid>
</Box>
uj5u.com熱心網友回復：
使用系統屬性很簡單。
<Box
display="flex"
justifyContent="center"
style={{
backgroundColor:"rgb(234, 237, 242)"
}}
>
...
uj5u.com熱心網友回復：
你可以試試下面的代碼。我已經檢查了這段代碼，它運行良好。
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1, backgroundColor: 'rgb(234, 237, 242)' }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Item>
<Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{ mb: 4 }}>
Hello
</Typography>
<Typography align="center" sx={{ px: 4 }} paragraph>
very very long line
</Typography>
</Item>
</Grid>
</Grid>
</Box>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/370044.html
上一篇：從Reduce獲取總價值的總和