在Mui V5中,应避免使用内联样式。许多可重用的样式文件可以用来更好地管理CSS。为了解决这个问题,可以通过使用CSS-in-JS的方式来定义样式。
例如,可以使用样式文件或全局CSS类定义样式,在需要的地方使用className
属性引用。
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
buttonStyle: {
backgroundColor: 'green',
color: 'white',
padding: '12px',
borderRadius: '5px',
fontWeight: 'bold',
}
});
function MyButton() {
const classes = useStyles();
return (
);
}
上述代码中,通过makeStyles
创建了一个样式类buttonStyle
,该类定义了按钮的样式。然后,在组件中使用classes.buttonStyle
来引用该样式类。
这样可以更好地管理和维护CSS,并将其与组件分离,增加代码的可重用性和可维护性。