如何让外部样式表仅作用于单个React组件，避免样式泄露到父组件

问题本质 #

你在React组件render函数内插入<link>标签引入外部样式的写法，本质是把样式规则全局注册到了浏览器的样式表中，不管<link>标签放在DOM树的哪个位置，样式都会作用于整个页面的所有元素，这是浏览器的原生行为，和React框架无关。

你尝试Shadow DOM方案的报错原因也很明确：MyComponent是原生Web Component自定义元素，和React的props体系完全独立，不存在this.props属性，自然读取不到this.props.children；同时你在render函数内注册自定义元素、在constructor里处理子节点的写法也不符合Web Component的生命周期规范。

可行解决方案 #

方案1：修复Shadow DOM实现（完全样式隔离，零额外依赖） #

这是最适合你需求的方案，修改后样式只会作用于Shadow DOM内部，完全不会污染父组件，同时解决报错问题：

import React, { Component } from 'react';

// 自定义元素注册放在组件外部，避免重复注册报错
class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  // 自定义元素挂载到DOM后再处理内容和样式
  connectedCallback() {
    // 外部样式表插入到shadow root内，仅作用于shadow内部元素
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
    this.shadowRoot.appendChild(link);
    // 把自定义元素包裹的子节点移动到shadow内部
    while (this.firstChild) {
      this.shadowRoot.appendChild(this.firstChild);
    }
  }
};
if (!customElements.get("my-component")) {
  customElements.define('my-component', MyComponent);
}

export default class Child extends Component {
  render() {
    return (
      <my-component>
        {/* 这里的所有内容只会应用shadow内部的样式，完全不影响外部父组件 */}
        <i className="fa fa-home"></i>
        <h1>Hello from shadow</h1>
      </my-component>
    );
  }
}

方案2：CSS前缀隔离（兼容性更好，适合需要兼容旧浏览器的场景） #

如果你不想用Shadow DOM，可以选择手动给外部样式加唯一前缀：

1. 把外部样式表下载到本地
2. 用PostCSS插件postcss-wrap给样式表内所有规则加上唯一的类名前缀，比如.child-only-wrapper
3. 子组件最外层套对应类名的容器：

// 引入加过前缀的样式文件
import './processed-font-awesome.css';

export default class Child extends Component {
  render() {
    return (
      <div className="child-only-wrapper">
        {/* 内部元素的样式只会在当前容器内生效 */}
        <i className="fa fa-home"></i>
      </div>
    )
  }
}

内容的提问来源于stack exchange，提问作者Djaenike