如何禁用Material UI v5中Button组件的文本自动大写功能？

Material UI 5的Button组件默认启用了textTransform: 'uppercase'样式，所以会把文本转为全大写。以下是两种常用的解决方式：

1. 单个Button临时取消（内联样式） #

直接在Button组件上通过sx属性覆盖默认样式，适合只需要修改单个Button的场景：

<Button variant="contained" sx={{ textTransform: 'none' }}>Hello</Button>

2. 全局统一取消（修改主题） #

如果项目中有多个Button都需要取消自动大写，推荐通过自定义主题全局修改，避免重复代码：

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

// 创建自定义主题，覆盖Button的默认样式
const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
        },
      },
    },
  },
});

// 在ThemeProvider下使用Button，全局生效
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">Hello</Button>
    </ThemeProvider>
  );
}

如果需要给Button文本设置更复杂的排版样式，也可以用Typography组件包裹文本并设置样式，但这种方式不如直接修改Button样式简洁。

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