目標:

在頁面上并排創建兩個div。它們應該一起覆蓋頁面的100%。使用react + Material UI的最新版本。

左邊的div應該有固定的寬度(比如200px)。

右邊的div應該覆蓋頁面的其余部分。

在CSS中，可以使用calc(100% - 200px)來動態計算右邊div的寬度。

面臨的問題:

我不能在材質界面中使用它。我試過內聯樣式(style = { { width = ' calc(100%-200)' } })，可以編譯但是不行。我也嘗試了makeStyles()，但是無濟于事。

我深深感謝社區在這件事上的幫助。

對于那些對如何使用makeStyles()編寫這個代碼感興趣的人來說:

const useStyles = makeStyles({
  width: 'calc(100% - 200px)'
});

或者，如果像素數量是在javascript層中動態生成的:

const elWidth = getMyElementWidth(); // returns '200'

const useStyles = makeStyles({
  width: `calc(100% - ${elWidth}px)`
});

正如dlewiski的回答所指出的，主要問題是需要在操作符周圍留出空間，并包括px單元。

我經常犯“忘記在calc()中的操作符周圍包含空格”的錯誤。

我只想指出，我所看到的關鍵問題是'-'之間沒有空格，200之后沒有' px '。

所以你有style = { { width = ' calc(100%-200)' } }

應為style = { { width = ' calc(100%-200 px)' } }

我知道這一點已經在原來的答復中表明了，但我認為對這個問題的具體細節作一些澄清會有所幫助。

如果您的代碼在MUI v5中不再工作，請檢查您是否正在使用theme.spacing()，因為在新版本中有一個突破性的變化。從遷移指南中:

默認情況下，theme.spacing現在返回以px為單位的單個值。

更正代碼:

V5

width: `calc(100vw - ${theme.spacing(3)})`

V4

width: `calc(100vw - ${theme.spacing(3)}px)`

現場演示

因為style是一個不能使用的對象=。

正確的做法是:

style = { { width:' calc(100%-200像素)' }}

如果沒有應用，請嘗試

style={{width: 'calc(100% - 200px)！重要信息' }}