我正在开发一个 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 样式。