Material-UI按钮样式覆盖不了自定义的CSS如何解决？

IT人凡敬提问于 2026-01-28 11:07:26 阅读 45

组件

我在用Vue和Material-UI做按钮组件时遇到问题，想给按钮加个悬停效果，但自定义的CSS样式完全没生效…

代码是这样的：



  
    
      点击我
    
  



.custom-btn {
  background: #4CAF50 !important;
}
.custom-btn:hover {
  opacity: 0.8;
}

样式表里加了!important还是没变颜色，悬停效果更是完全没反应。我检查过类名确实被正确添加到按钮元素上了，但Material-UI的默认样式好像优先级更高？试过把scoped去掉也不行…

Button按钮

我来解答赞 11 收藏

反馈

1 条解答

Prog.子璇 Lv1

问题应该出在Material-UI的样式优先级机制上。它使用了JSS来生成样式，这些样式通常是内联的，优先级本身就比较高，所以就算你加了!important也不一定管用。

解决方法有两种：

第一种是直接用Material-UI的API来自定义样式。比如这样：

import React from 'react';

import { makeStyles } from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';



const useStyles = makeStyles({

  customBtn: {

    background: '#4CAF50',

    '&:hover': {

      opacity: 0.8,

    },

  },

});



export default function CustomButton() {

  const classes = useStyles();

  return (

    

  );

}

这种方式最推荐，因为它是Material-UI官方支持的自定义方式。

第二种方法是调整你的CSS选择器优先级。可以试试这样写：

.custom-btn.MuiButton-root {

  background: #4CAF50 !important;

}

.custom-btn.MuiButton-root:hover {

  opacity: 0.8 !important;

}

这里通过组合选择器增加了权重，覆盖掉Material-UI的默认样式。

我个人更建议用第一种方法，毕竟Material-UI的设计初衷就是让你用它的API去定制样式，强行用外部CSS覆盖反而容易出问题。

2026-01-29 17:01