组件样式在react应用程序中不优先于全局css

Question

我有一个react应用程序：

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;

确认对话框.scs

.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;
}
}
}

问题是confirm-dialog.scss中的css没有覆盖bootstrap.css的.modal-*类。

我不明白出了什么问题。确认对话框组件有自己的样式，应该覆盖index.js文件中导入的.css文件中的CSS。由自定义react-hook触发的模态get。在我的另一个项目中也使用了相同的模式对话框，但在这个项目中，全局引导CSS优先于确认对话框自己的.scs.

Answer 1

Nevermind，想明白了。我只需要在index.js文件中的App.js导入之前移动所有.css导入。