如何解决如何使用makeStyles正确使用共享的Material UI样式?
我正在尝试在Material UI(React)应用程序之间共享样式,其中我有一个styles.ts
文件,如下所示:
import {makeStyles,Theme} from "@material-ui/core/styles";
export const useStyles = makeStyles((theme: Theme) =>
createStyles({/* ... */});
}
然后在需要使用这些样式的地方使用webhook:
import React from "react";
import clsx from "clsx";
import AppBar from "@material-ui/core/AppBar";
import {useStyles} from "../../styles";
export const MyAppBar: React.FC = (props) => {
const classes = useStyles();
// ...
return (
<AppBar
position="fixed"
className={clsx(classes.appBar,{[classes.appBarShift]: open})}
>
{/* ... */}
</AppBar>
);
}
但是某些自定义样式未应用,因为被这些默认样式覆盖。看来CSS的顺序不正确,并且还在其中两次创建了“ makeStyles”。
能否请任何人指出我正确的方向?
我已经尝试过切换导入顺序并使用StylesProvider,但是没有运气或其他陷阱。唯一有效的解决方案是使用!important
或将样式与组件保存在同一文件中(可以对某些组件执行此操作,但否则会违反DRY)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。