CODEWITHSUNDEEP
reactjsmaterial-ui
goscamp
goscamp

Reputation: 1106

How to override Typography colorPrimary in Link component Material UI

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;

Upvotes: 2

Views: 4829

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 81016

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

Upvotes: 1

Gayatri Dipali
Gayatri Dipali

Reputation: 1283

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

Upvotes: 1

Related Questions