MUI sx属性中calc()函数不生效，请求排查原因

问题说明 #

使用Material-UI的<Typography>组件时，通过sx属性设置ml: calc(100vw-100px)，该计算样式未在DOM中渲染，margin-left不生效。

代码示例 #

// App.js
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

export default function App() {
  return (
    <Box>
      {/* calc() 未生效 */}
      <Typography sx={{ ml: `calc(100vw-100px)` }}>Hello World!</Typography>
    </Box>
  );
}

问题根源 #

CSS的calc()语法要求运算符（+、-、*、/）两侧必须保留空格，你的表达式100vw-100px中减号前后没有空格，浏览器无法识别为合法的calc计算，因此该样式被忽略。

修复方案 #

在calc表达式的减号前后添加空格，修正后的代码：

<Typography sx={{ ml: `calc(100vw - 100px)` }}>Hello World!</Typography>

修改后浏览器能正确解析计算值，margin-left样式将正常应用。

内容的提问来源于stack exchange，提问作者ram