Пользовательский интерфейс материала - MakeStyles Overridden - PullRequest
Новая
       69

Пользовательский интерфейс материала - MakeStyles Overridden

0 голосов
/ 05 мая 2020

Добрый день, я пытаюсь добавить пользовательский CSS на панель приложений пользовательского интерфейса материала, но все стили, которые я применяю с помощью функции makeStyles, переопределяются стилем пользовательского интерфейса материала по умолчанию. Единственное исправление - применить! Important к моему стилю, но я не считаю это жизнеспособным решением. Следуя документации, в нем говорится об использовании компонента StylesProvider для настройки порядка внедрения CSS, но это также не дало никаких результатов. Любая помощь будет принята с благодарностью, вот пример того, что пытался сделать ive.

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

1 Ответ

0 голосов
/ 05 мая 2020

Вы можете переопределить стили MUI с помощью поставщика темы проверить поставщика темы

Или можете использовать свойство классов в компоненте Mui. классы

...