Mui v5.0.4 makeStyles、withStyles 不会将样式应用于 mui 组件

Question

我目前正在开发一个使用 Mui v5.0.4 的 React (v.17) 项目。我已经在需要的地方编写了自定义样式，并且一切都按预期工作。几天后，我开始处理同一个项目，当我启动应用程序时，我编写的样式没有按预期显示。这种情况发生在特定组件中，例如版式、按钮。我彻底检查了我的代码，尝试了不同的浏览器和计算机，但没有成功。

我创建了一个新项目，看看问题是否仅限于前一个项目，但情况似乎也并非如此。我将在下面发布该应用程序的代码片段以供参考。

应用程序.js

import React from 'react';

import Something from './something/Something';

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

export default App;

Something.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完成工作，但在这个问题出现之前我不需要它。应用的样式类确实出现在浏览器检查器中，我附上了下面的屏幕截图。

点击查看图片

我也很好奇为什么类名是.Something-something-1而不是.Something-something。如果需要，请索取任何其他信息。任何帮助深表感谢。谢谢！

PS这是一个代码沙箱来复制该问题。谢谢！ https://codesandbox.io/s/long-sky-8jree

解决方案（针对此特定问题）

1. 如果您使用 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",

2. 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 上可用的 prop。参考

import styles from './Something.styles';

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