css - 在 Material UI 中使用 calc()

Question

目标:

创建页面上并排的两个 div。它们一起应覆盖页面的 100%。使用最新版本的react + Material UI。

左侧的 div 应具有固定宽度(例如 200px)。

右侧的 div 应覆盖页面的其余部分。

在 CSS 中，可以使用 calc(100% - 200px) 动态计算右侧 div 的宽度。

面临的问题:

我无法在 Material UI 中使用它。我尝试了内联样式( style={{width='calc(100%-200)'}})，它可以编译但不起作用。我也尝试过 makeStyles()，但没有效果。

我非常感谢社区在此事上提供的帮助。

Answer 1

对于任何好奇如何使用 makeStyles() 编写此代码的人:

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

或者如果像素数量是在 javascript 层中动态生成的:

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

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

主要问题，如dlewiski's answer指出，需要在运算符周围包含空格并包含 px 单位。

我经常犯“忘记在 calc() 内的运算符周围包含空格”的错误。