How to override Typography colorPrimary in Link component Material UI

user_10559222 0
Viewed 1615

I want to use Link component https://material-ui.com/api/link/ and I want to set my own colors for primary and secondary, but I can see it uses Typography to set that. How to override it? With code below doesnt work

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

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

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

export default Link;
material-ui reactjs
2 Answers

One solution would be by overriding css rules (not recommended),

Better way of doing it would be by using palette of Mui ( Link to the docs )

But beware if you change your palette it will reflect in your whole app, meaning the color of other mui components will change

user_145227420

Below is an example showing two different ways of doing this. The first approach (CustomLink) targets the Typography Global class names. The second approach (CustomLink2) uses makeStyles to create classes that are passed in to the TypographyClasses prop of 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>
  );
}

Edit customize Link colors

Related documentation: https://cssinjs.org/jss-plugin-nested?v=v10.5.0#use--to-reference-selector-of-the-parent-rule

user_74959300
Related