Material-UI按钮自定义样式被默认样式覆盖怎么办？

UX增芳提问于 2026-02-08 21:26:24 阅读 59

框架

在用Material-UI的Button组件时，我想给按钮加个圆角和渐变背景，但发现自定义的CSS类和内联样式都没生效。之前试过用sx prop和className，但样式总是被覆盖…

比如这个代码：


<Button 
  variant="contained" 
  className="custom-btn" 
  sx={{ borderRadius: '20px' }}
>
  Submit
</Button>

对应的CSS写了！important也不行：


.custom-btn {
  background: linear-gradient(#ff9a9a, #fad0c4) !important;
  border-radius: 20px !important;
}

为什么会完全没反应？是不是优先级的问题？有没有稳妥的覆盖方法？

我来解答赞 6 收藏

反馈

1 条解答

迷人的荣荣 Lv1

问题在于Material-UI的Button组件默认样式优先级太高，sx和普通className会被覆盖。用styled封装或者在sx里直接写完整样式最稳。

import { styled } from '@mui/material';



const GradientButton = styled(Button)({

  background: 'linear-gradient(#ff9a9a, #fad0c4)',

  borderRadius: 20,

});



// 使用

<GradientButton variant="contained">Submit</GradientButton>

2026-02-08 23:16