javascript - Mui v5.0.4 makeStyles, withStyles 不会对 mui 组件应用样式

Question

这个问题在这里已经有了答案:





Use calc() function in makeStyles

(1 个回答)


10 个月前关闭。
这篇帖子在10个月前被编辑并提交审核，并且未能重新打开该帖子:

原始关闭原因未解决





我目前正在开发一个使用 Mui v5.0.4 的 react (v.17) 项目。我已经在需要的地方编写了自定义样式，并且一切都按预期工作。几天后，我开始从事同一个项目，当我启动应用程序时，我编写的样式并没有像预期的那样出现。这发生在特定的组件中，例如排版、按钮。我已经彻底检查了我的代码，在不同的浏览器和计算机上尝试过，但没有运气。
我创建了一个新项目以查看问题是否仅限于前一个项目，但似乎也并非如此。我将在下面发布应用程序的代码片段以供引用。
应用.js

import React from 'react';

import Something from './something/Something';

function App() {
  return <Something />;
}

export default App;

东西.js

import React from 'react';
import PropTypes from 'prop-types';
import { Typography } from '@mui/material';
import { withStyles } from '@mui/styles';

import styles from './Something.styles';

const Something = ({ classes }) => {
  return <Typography className={classes.something}>Something</Typography>;
};

Something.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Something);

Something.styles.js

const styles = (theme) => ({
  something: {
    fontWeight: 700,
    color: '#FF0000'
  }
});

export default styles;

我应该提到颜色确实适用，但字体粗细不适用。 !important完成工作，但在这个问题出现之前我不需要它。应用的样式类确实出现在浏览器检查器中，我附上了下面的屏幕截图。
Click to check image
我也很好奇为什么类名是 .Something-something-1而不是 .Something-something .如果需要，请询问任何其他信息。任何帮助深表感谢。谢谢!
附: 这是一个复制问题的代码沙箱。谢谢!
https://codesandbox.io/s/long-sky-8jree
解决方案(针对这个特定问题)

如果您使用 Mui v5.0.4

，请使用以下依赖项集

"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material": "^5.0.4",
"@mui/icons-material": "^5.0.3",
"@mui/styles": "^5.0.1",

将 App.js 中的元素包裹起来使用来自 Mui 的组件(Box、Grid 等)。

import React from "react";
import { Box } from "@mui/material";

import Something from "./Something/Something";

export default function App() {
  return (
    <Box>
      <Something />
    </Box>
  );
}

我已经用工作解决方案更新了上面提到的相同代码沙箱。

Answer 1

为一次性情况添加样式覆盖的最简单方法是使用 sx 支持所有 MUI . reference

import styles from './Something.styles';

const Something = ({ classes }) => {
  return <Typography sx={styles.something}>Something</Typography>;
 //classes prop wasn't needed here
};