我想在 mui 表的右側添加邊距。但是，它不起作用
這是我的代碼：
<TableContainer>
<Table sx={{ mr: 100 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell sx={{fontSize: 20, borderBottom: "1px solid #d9d9d6", borderTop: "1px solid #d9d9d6", borderLeft: "1px solid #d9d9d6", borderRight: "1px solid #d9d9d6"}}>RPC Name Response</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell sx={{borderBottom: "1px solid #d9d9d6", borderLeft: "1px solid #d9d9d6", borderRight: "1px solid #d9d9d6"}} className="response-container">
<div className="response">{response}</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
我將 sx 和 mr 添加到表中，但它不起作用。有誰知道如何為 mui 表添加邊距？
uj5u.com熱心網友回復：
<TableContainer />默認情況下，和組件的寬度都<Table />設定為 100%。如果您想要邊距，請將該元素的寬度設定為auto.
<TableContainer sx={{ mr: '100px', width: 'auto' }}>
<Table aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell
sx={{
fontSize: 20,
borderBottom: '1px solid #d9d9d6',
borderTop: '1px solid #d9d9d6',
borderLeft: '1px solid #d9d9d6',
borderRight: '1px solid #d9d9d6',
}}
>
RPC Name Response
</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell
sx={{
borderBottom: '1px solid #d9d9d6',
borderLeft: '1px solid #d9d9d6',
borderRight: '1px solid #d9d9d6',
}}
className="response-container"
>
<div className="response">{response}</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/530698.html
上一篇：使用順風在Next.js中格式化<Image/>的問題
下一篇：通過多個引數（輸入）過濾物件