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组件设计路由器的链接。

如何在带有MUI的React中使用useStyles（）覆盖标签

1 个答案: