在 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 的回答所指出的，主要问题是需要在操作员周围留出空间并包括px单元。

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

Answer 2

如果您的代码在MUI v5中不再工作，请检查您是否正在使用theme.spacing()，因为新版本中存在重大更改。来自迁移指南：

theme.spacingpx现在默认返回带有单位的单个值。

正确的代码在：

V5

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

V4

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

现场演示

Answer 3

我只想指出，我看到的关键问题是 200 之后的“-”和“px”之间没有空格。

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

应该 style={{width='calc(100% - 200px)'}}

我意识到这已经在原始答案中显示出来，但我认为对问题的具体细节进行更多澄清会有所帮助。

Answer 4

因为 style 是一个不能使用 = 的对象。

正确的做法是：

样式={{宽度：'calc(100% - 200px)'}}

如果没有应用，请尝试

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