Блог

Я хочу использовать компонент Link 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;
 

Ниже приведен пример, показывающий два разных способа сделать это. Первый подход ( CustomLink ) нацелен на глобальные имена классов Typography. Второй подход ( CustomLink2 ) используется makeStyles для создания классов, которые передаются в 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: {
    "amp;.MuiTypography-colorPrimary": {
      color: "green"
    },
    "amp;.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

Одним из решений было бы переопределение правил css (не рекомендуется),

Лучшим способом сделать это было бы использовать палитру Mui (ссылка на документы)

Но будьте осторожны, если вы измените свою палитру, это отразится на всем вашем приложении, то есть цвет других компонентов mui изменится