时间戳

首页 > 解决方案 > 在 MUI 中使用 calc()

css - 在 MUI 中使用 calc()

问题描述

客观的：

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

左边的 div 应该有一个固定的宽度（比如 200px）。

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

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

面临的问题：

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

我非常感谢社区在这件事上的帮助。

标签： cssreactjsmaterial-ui

解决方案

对于任何好奇如何使用以下方法编写此内容的人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()”的错误。

推荐阅读