时间戳

首页 > 解决方案 > 组件样式在 React 应用程序中不优先于全局 CSS

javascript - 组件样式在 React 应用程序中不优先于全局 CSS

问题描述

我有一个反应应用程序：

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;

确认-dialog.scss

.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 inconfirm-dialog.scss没有覆盖bootstrap.css's.modal-*类。

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

标签： javascriptcssreactjs

解决方案

没关系，想通了。App.js我只需要在导入index.js文件之前移动所有 .css导入。

推荐阅读