时间戳

首页 > 解决方案 > 覆盖 MuiLink 上的 focusVisible

reactjs - 覆盖 MuiLink 上的 focusVisible

问题描述

我想覆盖我的应用程序中focusVisible所有（材料 ui）的属性Links。

我知道我可以使用

const useStyles = makeStyles(() => ({
  focus: {
    backgroundColor: 'yellow',
  },
}));

进而

const classes = useStyles();
// ...
<Link classes={{ focusVisible: classes.focus }}>{linkText}</Link>

在我的组件中，但是我不想记住Link在我的应用程序中为每个人都这样做。

我尝试使用以下overrides功能createMuiTheme：

const myNewTheme = createMuiTheme({
  overrides: {
    MuiLink: {
      focusVisible: {
        backgroundColor: 'yellow',
      },
    },
  },
});

但它似乎并没有提高这个价值。

我需要做什么才能将我选择的focusVisible样式全局应用于Links应用程序中的所有内容？

标签： reactjsmaterial-ui

解决方案

focusVisible可用作没有参考选择器的实用程序类名。它应该使用以下全局覆盖工作：

const myNewTheme = createMuiTheme({
  overrides: {
    MuiLink: {
      root: {
        '&.Mui-focusVisible': {
          backgroundColor: 'yellow',
        },
      },
    },
  },
});

推荐阅读