如何防止网页样式受到注入 chrome 扩展程序样式的影响

Question

我正在开发一个 chrome 扩展，我在 react 中使用 webpack 进行了设置，它构建了最终的 html 和 js 文件，然后我在我的 chrome 扩展中使用它们，每当页面出现时，html 文件就会被注入到页面中已加载，但我在 React 应用程序中使用了 ant 设计，因此当我导入 ant 设计样式时，页面会受到样式的影响，因为我认为 css 文件由元素选择器组成。有什么办法可以防止这种情况发生吗？

import React, { Component } from "react";
import bookIcon from "../assets/icons/book.svg";
import { BrowserRouter, Switch, Route, withRouter } from "react-router-dom";
import styled from "styled-components";
import "../../node_modules/antd/dist/antd.css";
import {
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import "../app.css";
import NotesContainer from "./NotesContainer";
import Settings from "./Settings";

import { Button, Card, Tooltip } from "antd";
import { render } from "react-dom";
class Foreground extends Component {
  state = {};
  componentDidMount() {
    document.addEventListener("userData", function (e) {
      console.log(e.detail);
    });
  }

  navigateToSettings = (e) => {
    console.log("called");
    this.props.history.push("/settings");
  };
  render() {
    return (
      <AppContainer id="reset-this-root">
        <Card
          className="app-card"
          actions={[
            <Tooltip placement="top" title={"Settings"}>
              <SettingOutlined key="setting" />
            </Tooltip>,
            <Tooltip placement="top" title={"New note"}>
              <EditOutlined key="edit" />
            </Tooltip>,
            <Tooltip placement="top" title={"Tools"}>
              <EllipsisOutlined key="ellipsis" />
            </Tooltip>,
          ]}
        ></Card>
      </AppContainer>
    );
  }
}

export const AppContainer = styled.div`
  width: 400px;
  height: 100vh;
  background-color: white;
  z-index: 1000000000000;
  position: fixed;
  top: 0;
  right: 0;
`;

export default withRouter(Foreground);

这里我要导入 ant design css 样式。