Mui v5.0.4 makeStyles，withStyles不会将样式应用于mui组件[重复]

Question

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

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

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

Click to check image

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

P.S. 这是一个复制问题的代码沙箱。谢谢！ 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",

1. 使用来自 Mui 的组件（Box、Grid 等）包装 App.js 中的元素。

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
};