Material MakeStyles重写

Question

好日子，我试图将自定义CSS添加到一个重要的UI应用程序栏中，但是我使用makeStyles函数应用的所有样式都被默认的material样式覆盖。唯一的解决办法是应用！对我的造型很重要，但我不认为这是一个可行的解决办法。在文档之后，它声明使用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>
)}

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

Answer 1

可以使用主题提供程序检查主题提供程序覆盖MUI样式。

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

Answer 2

直接在导航栏中使用sx={{}}属性。

就像这样

<AppBar position='static' sx={{ borderRadius: '9px', color="inherit" }}> 
   //Other components
</AppBar>