在使用Material-UI（Mui）时，按钮的文本默认会被大写，这可能不是我们想要的效果。今天，我们来探讨如何在Mui中设置按钮文本不大写。

Mui中的按钮组件默认会使用uppercase样式，这意味着按钮文本会被大写。但是，有时候我们需要按钮文本保持原样，不大写。这时候，我们可以使用Mui提供的sx属性来覆盖默认样式。

下面是一个示例：

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

function MyButton() {
  return (
    <Button sx={{ textTransform: 'none' }}>
      Mui
    </Button>
  );
}

在这个示例中，我们使用sx属性来设置按钮的样式，textTransform属性被设置为none，这意味着按钮文本不会被大写。

除了使用sx属性，我们还可以使用Mui提供的classes属性来覆盖默认样式。下面是一个示例：

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

const useStyles = makeStyles({
  button: {
    textTransform: 'none',
  },
});

function MyButton() {
  const classes = useStyles();
  return (
    <Button className={classes.button}>
      Mui
    </Button>
  );
}

在这个示例中，我们使用makeStyles函数来定义一个样式对象，然后使用classes属性来应用这个样式对象到按钮组件上。

另外，也可以在创建默认皮肤时使用 createTheme 来设置按钮文本不大写。

以下是代码示例：

const theme = useMemo(() => {
  return createTheme({
    palette: { mode, secondary: { main: colors.blue['A100'] } },
    typography: {
      button: {
        textTransform: 'none'
      }
    }
  });
}, [mode]);

在这个示例中，我们在 createTheme 的 typography 属性中添加了 button 对象，并将 textTransform 属性设置为 none，这样按钮文本就不会被大写了。

如果您正在寻找一个专业的外包开发团队来帮助您解决 Material-UI 按钮文本大写的问题，玉东数据是一个不错的选择。我们的团队拥有丰富的经验和专业知识，可以帮助您解决各种前端开发问题。

联系我们，获取更多信息：

让我们一起解决您的前端开发问题！