Question

早上好，我试图向材质UI应用栏添加自定义CSS，但是我使用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 Component中的classes属性。 classes

材质用户界面-覆盖的MakeStyles

1 个答案: