reactjs - 如何在 React 和 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}>

Note - if you are using the <Link /> component from react-router-dom - this is not a MUI component, so it will not have any MUI related classnames. You can check the example here on how to design the router's link based on the MUI components.