所以我有以下情況：
從某個點開始，盒子的深藍色不再對齊。這兩個盒子目前正在一個 flex 容器中渲染。這個問題的解決方案是什么？我希望上面的容器始終與旁邊的容器對齊。相鄰的組件也可能超過 2 個。
Flex 容器（材質 ui Grid 組件使用 Flex）
<Box>
<Grid container>
{resultField.fields?.map((blockField, index) => {
return (
<Grid item xs={12} md={6}>
<DarkValueBox label={blockField.label} value={blockField.value} />
</Grid>
);
})}
</Grid>
暗值框
export const DarkValueBox = ({ label, value, index }) => {
const classes = useStyles();
return (
<Box sx={{ borderRadius: 5 }}>
<Box
sx={{
backgroundColor: "#0A7BB1",
color: "#fff",
px: 2,
py: 3,
borderRight: "1px solid #fff",
}}
>
<Typography fontWeight={600} variant="subtitle1">
{label}
</Typography>
</Box>
<Box sx={{ px: 2, py: 2, border: "1px solid lightgrey" }}>
<Typography variant="subtitle1">
{value}
</Typography>
</Box>
</Box>
);
};
這是我重新創建問題的代碼和框：
https://codesandbox.io/s/add-material-ui-forked-ge42z?file=/src/index.js
uj5u.com熱心網友回復：
一種方法是 - 如果您不想剪切標簽以向用戶顯示盡可能多的資訊 - 確保藍色框始終占據行中最高容器的高度。
您可以通過將包裝類添加到DarkValueBox具有以下規范的容器來做到這一點：
wrapper: {
height: "100%",
display: "flex",
flexDirection: "column"
}
然后，告訴你的盒子類取 100%：
box: {
backgroundColor: "darkblue",
border: "1px solid grey",
color: "white",
wordBreak: "break-word", // btw: its `break-word`, not `word-break`
height: "100%"
},
就是這樣，發現它在一個分叉的沙箱中作業：https ://codesandbox.io/s/add-material-ui-forked-24zg7?file =/ src/ index.js
uj5u.com熱心網友回復：
好的，所以我正在瀏覽您的沙箱，而不是撰寫代碼，我決定為您指明正確的方向。
您已經宣告了一個帶有材質 UI 的 Grid，它是一種類似于 FlexBox 的容器。
您尚未宣告盒子或里面的容器的尺寸或寬度。
一旦您為外部“主”容器設定了網格大小和包裝方向，您就可以設定內部容器的大小，即您的標簽框。
這將使它們對齊。
對于文本，有一個 'textOverflow' 屬性，它將停止任何額外的文本環繞組件，而是將其替換為 '...'
Material UI Grid - https://mui.com/components/grid/ Textoverflow - CSS: text-overflow: ellipsis with reactJS 和 IE
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400005.html
上一篇：反應打開和關閉突出顯示