Mui v5.0.4 makeStyles, withStyles won't apply styles to mui components

I'm currently working on a react (v.17) project which uses Mui v5.0.4. I've written custom styles where needed and everything was working as expected. After a couple of days I started working on the same project and when I launched the application that the styles I wrote did not appear as expected. This happened in specific components like Typography, Button. I've thoroughly checked my code, tried on different browsers and computers but no luck.

I created a new project to see if the problem is just limited to the previous one but that doesn't seem to be the case either. I will post the code snippets of the app below for reference.

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;

I should mention that the color does apply but the font-weight doesn't. !important gets the job done but I didn't need it before this issue came up. The applied style class does appear in the browser inspector, of which I have attached a screenshot of below.

Click to check image

I'm also curious as to why the classname is .Something-something-1 and not .Something-something. Do ask for any additional information if needed. Any help is much appreciated. Thanks!

P.S. Here's a code sandbox to replicate the issue. Thanks! https://codesandbox.io/s/long-sky-8jree

Solution (for this specific problem)

1. Use the following set of dependencies if you are using 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. Wrap the elements in App.js with a component from Mui (Box, Grid etc.).

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

import Something from "./Something/Something";

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

I have updated the same code sandbox mentioned above with the working solution.