reactjs - React makeStyle 无法正常工作并导致其他组件消失

Question

我查看了一个教程并在我的 App.js 中编写了完全相同的代码来创建样式按钮，makeStyles但它没有用。每当我使用makeStyles它时，它都会导致其他组件消失。我尝试在没有任何其他组件的情况下独立使用它，但效果不佳。

这是我的App.js一切都应该可以正常工作，但是.....

import React from "react";
import { Button, makeStyles } from "@mui/material";
const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px",
  },
});
function ButtonStyled() {
  const classes = useStyles();
  return <Button className={classes.root}>Test</Button>;
}
const App = () => {
  return (
    <div>
      <ButtonStyled />
    </div>
  );
};

export default App;