стиль компонента не имеет приоритета над глобальным css в приложении React

Question

У меня есть приложение для реагирования:

index. js

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "@material-ui/styles";
import { CssBaseline } from "@material-ui/core";

import Themes from "./themes";
import App from "./components/App";
import * as serviceWorker from "./serviceWorker";
import { LayoutProvider } from "./context/LayoutContext";
import { UserProvider } from "./context/UserContext";
import { GridPaginationProvider } from "context/GridPaginationContext";
import { ConfirmDialogServiceProvider } from "context/ConfirmDialogContext";

import "bootstrap/dist/css/bootstrap.css";

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-material.css";

ReactDOM.render(
  <LayoutProvider>
    <UserProvider>
      <GridPaginationProvider>
        <ConfirmDialogServiceProvider>
          <ThemeProvider theme={Themes.default}>
            <CssBaseline />
            <App />
          </ThemeProvider>
        </ConfirmDialogServiceProvider>
      </GridPaginationProvider>
    </UserProvider>
  </LayoutProvider>,
  document.getElementById("root")
);


serviceWorker.unregister();

вот модальный компонент:

import React from "react";
import { Button } from "@material-ui/core";
import { Modal, ModalHeader, ModalBody } from "reactstrap";

import "./confirm-dialog.scss";

const ConfirmDialog = ({
  modalOptions,
  open,
  title,
  icon,
  variant,
  description,
  buttonTexts,
  onSubmit,
  onClose
}) => {
  return (
    <Modal isOpen={open} toggle={onClose} {...modalOptions} zIndex={1201}>
      <ModalHeader toggle={onClose}>{title}</ModalHeader>
      <ModalBody>
        <div className="dialog">
          <div className="dialog-icon">
            <img src={icon} alt="icon" />
          </div>
          <div className="dialog-content">{description}</div>
          <div className="dialog-actions">
            <Button variant="contained" color="primary" onClick={onSubmit}>
              {buttonTexts && buttonTexts.ok}
            </Button>
            <Button variant="contained" color="secondary" onClick={onClose}>
              {buttonTexts && buttonTexts.cancel}
            </Button>
          </div>
        </div>
      </ModalBody>
    </Modal>
  );
};

export default ConfirmDialog;

confirm-dialog.s css

.modal {
  z-index: 1201 !important;
  &-content {
    border-radius: 20px;
  }

  &-body {
    padding: 0 30px 40px;
  }
}

.dialog {
  text-align: center;

  &-content {
    font-size: 16px;
    color: #272727;
    padding: 22px 0;
  }

  &-actions {
    button {
      margin: 0 10px;
      font-size: 14px;
      font-weight: normal;
      min-width: 110px;
    }
  }
}

Проблема в том, что css в confirm-dialog.scss не отменяет классы bootstrap.css .modal-*.

Не понимаю, в чем проблема. Компонент диалога подтверждения имеет свои собственные стили, которые должны переопределять файлы CSS из .css, импортированные в файл index.js. Модальное окно запускается пользовательским react-hook. Тот же модальный диалог работает в моем другом проекте, но в этом проекте глобальный bootstrap CSS имеет приоритет над собственным диалоговым окном подтверждения .s css.

Answer 1

Nevermind, разобрался. Мне просто нужно было переместить все. css импорт до App.js импорта в index.js файл.