如何让内部npm组件库的CSS优先级高于用户项目CSS？

以下是几种可靠的方案，能让你的React内部组件库CSS保持更高优先级，无需依赖!important：

1. 采用CSS模块化或Scoped CSS #

使用React生态的CSS模块化方案（如CSS Modules）或CSS-in-JS库（styled-components、Emotion），这类工具会自动生成唯一哈希类名，从根源上避免和用户项目的类名冲突。

示例（CSS Modules）：
组件样式文件Button.module.css：

.button {
  padding: 8px 16px;
  border-radius: 4px;
}

组件中引入：

import styles from './Button.module.css';

const Button = () => <button className={styles.button}>Click</button>;

最终渲染的类名会是类似Button_button__xY3zA的唯一值，用户项目的普通类名无法覆盖。

2. 提升选择器特异性 #

给组件库的所有元素添加一个全局唯一的根前缀类（比如internal-ui-library），所有组件样式都基于这个前缀嵌套编写，通过提升选择器的特异性来覆盖用户样式。

示例：

/* 库的全局根类 */
.internal-ui-library {
  /* 全局重置或基础样式 */
}

/* 组件样式基于根类嵌套 */
.internal-ui-library .button {
  padding: 8px 16px;
  border-radius: 4px;
}

.internal-ui-library .card {
  border: 1px solid #eee;
}

这种方式下，.internal-ui-library .button的特异性远高于用户项目中的.button，自然优先级更高。

3. 使用CSS @layer规则 #

现代浏览器支持的@layer可以明确指定样式层的优先级，将组件库的样式放在更高优先级的层中，用户项目的默认样式会自动处于更低优先级。

示例：

/* 定义库的样式层，优先级高于默认层 */
@layer library;

/* 将所有库样式包裹在该层内 */
@layer library {
  .button {
    padding: 8px 16px;
  }
  .card {
    border: 1px solid #eee;
  }
}

注意：如果用户项目也使用了@layer，需确保你的库层声明顺序晚于用户层（后声明的层优先级更高）。

4. 谨慎使用内联样式 #

React的内联样式优先级高于外部CSS，适合用于需要强制生效的简单样式，但缺点是无法使用伪类、媒体查询等高级CSS特性，仅作为补充方案。

示例：

const Button = () => (
  <button style={{ padding: '8px 16px', borderRadius: '4px' }}>
    Click
  </button>
);

5. 统一前缀的CSS命名规范 #

如果不使用模块化方案，可以给所有组件类名添加唯一前缀（比如iu-，代表internal-ui），降低冲突概率的同时，也能通过组合选择器提升特异性。

示例：

.iu-button {
  padding: 8px 16px;
}

.iu-card .iu-card-header {
  font-size: 18px;
}

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