清除导入的 CSS

Question

上下文

我正在使用 React 路由器。我的大部分路线/页面都包含某种 .css 用于他们的组件 + 隐式 antd（UI 框架）样式表：

import '../styles.css';

这样，在我的 App 中声明的所有视图都会自动继承这些样式表。

问题

我现在需要一个从任何其他样式表开始的路线/页面。

是否可以定义一旦页面组件被渲染，任何其他样式表都会从渲染视图中移除？

---

我尝试了什么？

我尝试从 <App> 组件声明中删除导入（假设 create-react-app 基础）。但是每个页面组件都会清楚地导入这些样式，所以当我导入这些组件时，antd 样式也会被导入。

更不用说antd 安装为npm 依赖项这一事实可能包括这些样式。

常见问题

如果每个组件的所有样式都是相互独立编写的，为什么还需要这个？你不能不渲染那些组件吗？

我没有渲染那些组件。这主要是antdbody和font-family的默认样式等问题。

Answer 1

不是这个特定问题的答案，但是如果您在寻找如何从 React 应用程序中取消导入 css 文件时发现了这篇文章（就像我一样），这里有一个解决方案：https://stackoverflow.com/a/67352039/5648839

对于这个具体问题，我会使用emotion's <Global/> Component

Answer 2

您可以通过使用style-it 包来完成此操作

组件 A

class AppA extends React.Component {
  render() {
    return (
      <div>
        <Style>
          {`
            body {
              font-size: small;
              font-family: arial;
            }
            h1 {
              font-size: large;
              color: red
            }

         `}
        </Style>
        <h1> Component A this defualt style for h1 red</h1>
      </div>
    )
  }
}

组件 B

class AppB extends React.Component {

  render() {
    return (
      <div>
        <Style>
          {`
            body {
              font-size: small;
              font-family: arial;
              background: #f1f1f1;
            }
            h1 {
              font-size: large;
              color: blue
            }
         `}
        </Style>
        <h1> Component B this defualt style for h1 blue</h1>
      </div>
    )
  }
}

工作示例

Answer 3

您可以使用内联样式来独立设置组件的样式。即使导入了各种样式表，您也可以这样做：

class SomeComponent extends React.Component {
  ...

  render() {
    return (
      <div style={{ font-family: 'sans-serif', color: 'red', padding: 10 }}>
        This will override imported styles.
      </div>
    );
  }
}