如何让Material-UI按钮文字不自动转为全大写？

原因 #

Material-UI的Button组件默认内置了textTransform: 'uppercase'的CSS样式，这是组件的默认设计规则，所以即便你写的是大小写混合的文字，渲染时也会被强制转成全大写。

解决方法 #

方法一：单个按钮直接覆盖样式 #

在Button的sx属性里添加textTransform: 'none'，直接取消大写转换：

<Button sx={{ ml: 6, textTransform: 'none' }} variant="outlined">Add</Button>

方法二：全局修改主题（适用于多个按钮） #

如果项目里多个按钮都需要取消自动大写，可以通过自定义主题全局设置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

// 创建自定义主题
const customTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
        },
      },
    },
  },
});

// 在根组件中用ThemeProvider包裹
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的应用组件内容 */}
    </ThemeProvider>
  );
}

方法三：用Typography组件嵌套控制 #

把按钮文字放在Typography组件里，通过Typography的属性控制文本转换：

import Typography from '@mui/material/Typography';

<Button sx={{ ml: 6 }} variant="outlined">
  <Typography textTransform="none">Add</Typography>
</Button>

内容的提问来源于stack exchange，提问作者saMk