reactjs - 如何在 Link 组件 Material UI 中覆盖 Typography colorPrimary

Question

我想使用链接组件https://material-ui.com/api/link/并且我想为主要和次要设置我自己的颜色，但我可以看到它使用排版来设置它。如何覆盖它？使用下面的代码不起作用

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

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

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

export default Link;

标签： reactjsmaterial-ui

Answer 1

下面是一个例子，展示了两种不同的方法。第一种方法 ( CustomLink) 以Typography Global 类名称为目标。第二种方法 ( CustomLink2) 用于makeStyles创建传递给TypographyClassesprop 的类Link。

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>
  );
}

相关文档：https ://cssinjs.org/jss-plugin-nested?v=v10.5.0#use--to-reference-selector-of-the-parent-rule