添加邊距和間距可以輕松完成。 Material-UI為我們提供了一些捷徑。而不是 CSS 樣式每個組件。
在下面的代碼行中，如果沒有指定px度量單位，則邊距無法正確應用
<Box display="flex" alignItems="center" marginRight={`${theme.spacing(25)}px`}>...</Box>
我試圖讓 MUI 來完成這項作業，并利用該技術而不是使用 CSS 類進行樣式設定。
但是，沒有字串的連接使用它更方便
<Box display="flex" alignItems="center" marginRight={theme.spacing(25)}>...</Box>
uj5u.com熱心網友回復：
查看檔案（https://mui.com/components/box/），您不應以任何方式使用主題物件。
<Box display="flex" alignItems="center" marginRight={2}>...</Box>
2將為theme.spacing()您傳遞值并px添加后綴。在 v4.10 上測驗。
附注。不使用主題意味著您也不必打電話useTheme()。
編輯
我想我已經找到了你的問題的可能原因。看看這個：https : //github.com/mui-org/material-ui/blob/a0e725d119bbb91fb4f8cd6b44745916e66c2e2e/packages/mui-system/src/createTheme/createSpacing.ts#L29
如果您使用的是 mui v5，您可能會在控制臺中看到訊息 ( https://github.com/mui-org/material-ui/blob/a0e725d119bbb91fb4f8cd6b44745916e66c2e2e/packages/mui-system/src/spacing.js#L130 )。
傳遞給 margin prop 的有效值似乎在 0-8 范圍內，但您通過了 25（我從未使用過那么高的值）。
請注意，1 不代表 1px，回傳值可能會有所不同，但默認為 8px。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/323438.html
下一篇：從百分比獲取顏色范圍