要覆盖Material UI组件的样式,可以使用makeStyles
或useStyles
钩子函数来创建自定义样式并应用于组件。
下面是一个不使用高阶组件(HOC)的示例,展示如何使用makeStyles
函数来覆盖Material UI按钮组件的样式:
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
button: {
backgroundColor: 'red', // 自定义按钮背景颜色
color: 'white', // 自定义按钮文字颜色
},
}));
const CustomButton = () => {
const classes = useStyles();
return (
);
};
export default CustomButton;
在上面的示例中,makeStyles
函数接受一个回调函数作为参数,该回调函数返回一个对象,其中包含自定义样式。我们可以使用CSS属性来定义自定义样式,然后将样式类名应用于组件。
通过这种方式,我们可以轻松地覆盖Material UI组件的样式,而无需使用HOC。