Reactjs 如何在链接组件材质UI中覆盖排版颜色Primary

我想使用链接组件，我想设置我自己的主要和次要颜色，但我可以看到它使用排版来设置。如何覆盖它？下面的代码不起作用

const typographyStyle = withStyles({
    root: {
        colorPrimary: {
            color: ColorsTheme.primary.default
        }
    }
});

const StyledLink = withStyles(() => ({
}))(MaterialLink);

const Link = props => (
    <StyledLink TypographyClasses={typographyStyle} {...props} />
);

export default Link;

const-typographyStyle=with-styles({
根目录：{
初级颜色：{
颜色：colorsTime.primary.default
}
}
});
const StyledLink=带有样式（（）=>({
}))（材料链接）；
const Link=props=>(
);
导出默认链接；

一种解决方案是覆盖css规则（不推荐）

更好的方法是使用Mui调色板 （）

---

但请注意，如果更改调色板，它将反映在整个应用程序中，这意味着其他mui组件的颜色将发生变化。下面的示例显示了两种不同的方法。第一种方法（

CustomLink

）的目标是。第二种方法（

CustomLink2

）使用

makeStyles

创建传递到

Link

的

TypographyClasses

属性的类

import React from "react";
import MuiLink from "@material-ui/core/Link";
import { withStyles, makeStyles } from "@material-ui/core/styles";

const CustomLink = withStyles({
  root: {
    "&.MuiTypography-colorPrimary": {
      color: "green"
    },
    "&.MuiTypography-colorSecondary": {
      color: "purple"
    }
  }
})(MuiLink);

const useTypographyStyles = makeStyles({
  colorPrimary: {
    color: "orange"
  },
  colorSecondary: {
    color: "brown"
  }
});

const CustomLink2 = (props) => {
  const typographyClasses = useTypographyStyles();
  return <MuiLink TypographyClasses={typographyClasses} {...props} />;
};
export default function App() {
  return (
    <div className="App">
      <MuiLink color="primary">Default Primary</MuiLink>
      <br />
      <MuiLink color="secondary">Default Secondary</MuiLink>
      <br />
      <CustomLink color="primary">Custom Primary</CustomLink>
      <br />
      <CustomLink color="secondary">Custom Secondary</CustomLink>
      <br />
      <CustomLink2 color="primary">Custom 2 Primary</CustomLink2>
      <br />
      <CustomLink2 color="secondary">Custom 2 Secondary</CustomLink2>
    </div>
  );
}

从“React”导入React；
从“@material ui/core/Link”导入MuiLink；
从“@material ui/core/styles”导入{withStyles，makeStyles}”；
const CustomLink=with styles({
根目录：{
“&.MuiTypography colorPrimary”：{
颜色：“绿色”
},
“&.MuiTypography colorSecondary”：{
颜色：“紫色”
}
}
})（MuiLink）；
const useTyptographyStyles=makeStyles({
初级颜色：{
颜色：“橙色”
},
颜色次要：{
颜色：“棕色”
}
});
const CustomLink2=（道具）=>{
const typographyClasses=UseTyptographyStyles（）；
返回；
};
导出默认函数App（）{
返回(
默认主


默认二级


自定义主


定制二级


自定义2主


定制2中学
);
}

---

相关文档：

这就是为什么我不想在整个调色板中使用它，只有在这个组件中，您可以只检查特定元素并检查

类名

，然后使用

覆盖css规则！重要信息

这是我开始做的，但我希望这里有更好的方法，就像调色板中应该有一些自定义颜色选项一样。也许您可以尝试使用

createStyles

方法，然后使用

useStyles

。现在你可以直接改变颜色了。是的，谢谢，这就是我最后做的，但我希望还有其他方法：）@user0810我在我的答案中添加了第二种方法。