如何使用makeStyles正确使用共享的Material UI样式？

编程问答 2022-08-22

问题描述

我正在尝试在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”。

enter image description here

能否请任何人指出我正确的方向？

我已经尝试过切换导入顺序并使用StylesProvider，但是没有运气或其他陷阱。唯一有效的解决方案是使用!important或将样式与组件保存在同一文件中（可以对某些组件执行此操作，但否则会违反DRY）。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

material-uireactjsreactjstypescripttypescript