Material-UI 的 Button 为什么样式没生效？

技术红芹提问于 2026-03-04 12:57:17 阅读 6

组件

我按照文档引入了 Material-UI 的 Button 组件，但按钮看起来还是原生样式，没有 Material Design 的效果，是不是哪里漏了？

我已经装了 @mui/material 和 @emotion/react，也用了 ThemeProvider，但按钮就是不带样式。下面是我的代码：

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

function App() {
  return (
    <Button variant="contained" color="primary">
      点我
    </Button>
  );
}

我来解答赞 5 收藏

反馈

1 条解答

司马雨婷 Lv1

兄弟，你这缺了个核心依赖包啊。

MUI v5 底层是用 Emotion 做样式引擎的，光装 @emotion/react 不行，必须还得装 @emotion/styled。没这个包，样式根本挂不上去，自然就是原生丑样子了。

赶紧补装一下：

npm install @emotion/styled @emotion/react

装完重启一下项目，按钮样式应该就回来了。

另外，记得在根组件外面套个 CssBaseline，不然有些全局样式（比如字体、box-sizing）也会不对劲。用法大概是这样的：

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



function App() {

  return (

    <>

      <CssBaseline />

      {/* 你的其他组件 */}

    </>

  );

}

2026-03-04 13:06