材质 UI - 覆盖 MakeStyles

Question

美好的一天，我正在尝试将自定义 CSS 添加到材质 UI 应用栏，但我使用 makeStyles 函数应用的所有样式都被默认材质 UI 样式覆盖。唯一的解决方法是将 !important 应用于我的样式，但我不认为这是一个可行的解决方法。按照文档，它声明使用 StylesProvider 组件来配置 CSS 注入顺序，但这也没有证明任何结果。请任何帮助将不胜感激，这是我尝试做的一个例子。

Index.js

import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import 'typeface-roboto';
import { StylesProvider } from '@material-ui/core/styles';

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
 hydrate(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
} else {
 render(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
}

serviceWorker.unregister();

使用 MakeStyles 的组件

const navBarStyles = makeStyles((theme) => ({
  link: {
    margin: theme.spacing(1, 1.5)
  }
}));

export default function NavbarComponent() {
  const classes = navBarStyles();
    return (
      <AppBar position="static" elevation={0}>
        <Toolbar className="flex-wrap">
          <Typography variant="h6" color="inherit" noWrap className="flex-grow-1">
            test
          </Typography>
          <nav>
            <Link variant="button" color="textPrimary" href="#" className={classes.link}>
              Features
            </Link>
          </nav>
        </ToolBar>
      </AppBar>
)}

注意我在这个项目中使用 React-Snap，所以我不确定这是否是它崩溃的原因，https://www.npmjs.com/package/react-snap

Answer 1

您可以使用主题提供程序覆盖 MUI 样式 check theme provider

或者可以在 Mui 组件中使用 classes 属性。 classes