Material UI makeStyles 不改变所有元素的 css 属性

Question

我在安装 npm install @mui/styles 后从文档中复制了这段代码：

import * as React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

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',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

在我的本地机器上，它似乎忽略了白色属性、边框属性以及方框阴影。是否有一个原因？我已经在 package.json 中确认我正在运行 mui-material/styles 5.2.3

Answer 1

我相信 this 会回答您的问题。因为 makeStyles 在 MUI V5 中已弃用。

您始终可以使用 sx 道具来添加自定义主题。

我遇到了同样的问题，this article 开发人员救了我。

Material UI makeStyles 不改变所有元素的 css 属性

Material UI makeStyles not changing the css properties of all elements

reactjs

material-ui

makestyles