听起来CSS Modules或许多其他 CSS-in-JS 包可以满足您的需求。其他包括Emotion（我目前最喜欢的）、Styled Components或这里的许多包。

CSS module是一个 CSS 文件，其中默认情况下所有类名和动画名都在本地范围内。所有 URL (url(...)) 和 @imports 都是module请求格式（./xxx 和 ../xxx 表示相对，xxx 和 xxx/yyy 表示在module文件夹中，即在 node_modules 中）。

这是一个快速示例：

假设我们有一个 React 组件，如：

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Click Me
      </button>
    );
  }
}
export default Button;

和一些CSS ./styles/button.css：

.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

在 CSS Modules 执行后，生成的 CSS 将类似于：

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

其中_3DjDE是随机生成的散列 - 为 CSS 类提供唯一名称。

替代

一个简单的替代方法是避免使用通用选择器（如p，code等），并采用了组件和元件基于类的命名约定。即使是像BEM这样的约定也有助于防止您遇到的冲突。

将此应用于您的示例，您可能会选择：

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

基本上，您需要设置样式的所有元素都将获得唯一的类名。

也许react-scoped-css会有所帮助。顺便说一句，我是这个库的作者，如果你发现任何问题或只是想改进它，你可以随时提出问题或发送公关。

您可以使用 SASS (.scss) 来模仿作用域 CSS。

假设您只需要在一个组件中使用引导程序（以避免冲突）。将组件包裹起来<div className='use-bootstrap'>，然后创建一个 .scss 文件，如下所示：

.use-bootstrap {   
  // Paste bootstrap.min.css here
}

因为您提到您使用了create-react-app，所以这里的解决方案很容易更改style.css为style.module.css，它看起来像这样：

import styles from "./style.css"
<button className={styles.button}>blabla</button>

关于本文的更多信息：https : //blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e

使用此文件命名约定[name].module.css 并查看文档：https : //create-react-app.dev/docs/adding-a-sass-stylesheet

JSX 文件

import React from 'react';
import styles from './index.module.scss';

const MyPage = () => {
    return (
        <div className={styles}>
            <h1>My Page</h1>
        </div>
    );
};

export default MyPage;

样式文件

    h1 {
        color: #f3f3f3;
        font-family: "Cambria";
        font-weight: normal;
        font-size: 2rem;
    }