Как переопределить типографику colorPrimary в пользовательском интерфейсе материала компонента Link
Я хочу использовать компонент 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;
Ответы 2
Одним из решений может быть переопределение правил css (не рекомендуется),
Лучше всего это сделать с помощью палитры Mui. ( Ссылка на документы )
Но будьте осторожны, если вы измените свою палитру, это отразится на всем вашем приложении, а это означает, что цвет других компонентов mui изменится.
Вы можете просто проверить конкретный элемент и проверить className, а затем переопределить правила css, используя !important
Это то, что я начинаю делать, но я надеялся, что есть более приятный способ
То же самое здесь, как будто в палитре должно быть что-то вроде опции пользовательских цветов. Может быть, вы можете попробовать использовать метод createStyles, а затем использовать useStyles. Теперь вы можете изменить цвет напрямую.
Ниже приведен пример, показывающий два разных способа сделать это. Первый подход (CustomLink) нацелен на имена классов Typography Global. Второй подход (CustomLink2) использует makeStyles для создания классов, которые передаются в TypographyClasses опору 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
Да, спасибо, это то, что я наконец сделал, но я надеялся, что есть другой способ :)
@user0810 user0810 Я добавил второй подход к своему ответу.
Поэтому я не хочу менять всю палитру, только этот компонент