我们可以使用 makeStyles 覆盖一些基本的 MUI 组件样式吗？

Question

：D

这是我第一次使用 React 和 MUI 从头开始一个项目，我一直想知道我是否设置正确。

我目前想使用 makeStyles 添加一些样式到 Material UI 提供的一些组件，例如 Button、Field 或 Paper。

问题是，每当我向这些组件之一添加某种样式时，如果默认组件已经定义了属性，则我添加的样式将不会被考虑在内。

举个简单的例子，我有一个非常简单的按钮，它应该是圆形的并且具有深绿色背景颜色，但它看起来像这样：

正如我们在下面的代码中看到的，我确实尝试添加一些样式，但按钮没有成功。同时，网格组件和 div 元素也考虑了其添加的样式。

<Grid item className={classes.gridItem}>
    <div className={classes.formButtonContainer}>
        <Button onClick={submitForm}>
            Login
        </Button>
    </div>
</Grid>

下面，我们可以看到我使用 makeStyles 添加的样式：

export default makeStyles((theme) => ({
    button: {
        width: '100%',
        borderRadius: '25px',
        backgroundColor: '#1db954',
        color: 'white'
    },
    formButtonContainer: {
        textAlign: 'center',
    },
    gridItem: {
        width: '100%'
    },
}));

在网上，我一直在阅读有关添加诸如 InputProps 之类的道具或在我的主题创建中包含 overrideStyles 的信息，但到目前为止，这些都不起作用，这就是我向你们询问的原因:)

如有任何建议，我们将不胜感激，提前感谢您的阅读！

Answer 1

makeStyles ->“Material UI 的旧版样式解决方案，现已弃用，不建议使用。”

可能的替代选项 - styled：

import { styled } from '@mui/system'
...
const MyButton = styled(Button)(({ theme }) => ({
  width: '100%',
  borderRadius: '25px',
  backgroundColor: '#1db954',
  color: 'white',
}))