如何在 React with MUI 中使用 useStyles() 覆盖标签

Question

我正在尝试用 makeStyles() 覆盖 React-Router 的 Link 标签以删除链接装饰。我是否错误地使用了 makeStyles？默认文本下划线仍然显示。

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
  Link: {
    textDecoration: "none",
  },
}));

Answer 1

makeStyles 函数不会覆盖任何与 Mui 相关的样式定义。 makeStyles 的用法是为您提供一种创建新类然后使用它们的简单方法。

例如：

const useStyles = makeStyles(theme => ({
    myLayout: {
        width: "auto",
        background: "red"
    }
}));
const classes = useStyles();
...
<div className={classes.myLayout}>

如果你想覆盖 Mui 组件的整个定义，你需要知道它是哪个组件，它的内部 Mui 名称是什么，然后你可以使用createMuiTheme：

const muiTheme = createMuiTheme({
    overrides: {
        MuiLink: {
            root: {
                textDecoration: "none"
            }
        },
    }
});
...
<MuiThemeProvider theme={muiTheme}>
    <Link />
</MuiThemeProvider>

如果您只想更改一个特定链接（而不是覆盖您网站中所有链接的样式定义），您可以使用makeStyles，然后使用<Link /> 组件中的特定类：

const useStyles = makeStyles(theme => ({
    noDecoration: {
        textDecoration: "none"
   }
}));
const classes = useStyles();
...
<Link className={classes.noDecoration}>

注意 - 如果您使用 react-router-dom 中的 <Link /> 组件 - 这不是 MUI 组件，因此它不会有任何与 MUI 相关的类名。您可以check the example here了解如何基于MUI组件设计路由器的链路。