如何避免自定义样式污染外部npm依赖包的内置组件样式

该问题的核心是全局使用原生标签选择器编写业务样式导致的样式溢出，以下是可落地的最佳实践：

• 优先使用带命名空间的自定义类名承载业务样式
  你提到的封装自定义按钮组件、添加专属类名（如appname-button）是长期可维护的最优方案。可以将所有业务组件的类名统一添加项目前缀，避免和第三方组件类名冲突，业务样式完全不依赖原生标签选择器，从根源避免样式污染。
• 全局原生标签仅做基础重置，不写入业务属性
  如果确实需要编写全局button样式，仅保留margin:0、padding:0这类重置浏览器默认样式的属性，不要写入box-shadow、border-radius这类业务化的视觉属性，所有视觉相关的样式全部收敛到自定义类名下。如果现有全局业务样式暂时无法重构，可以用:not()选择器做临时兼容，例如button:not([class*="第三方组件前缀"]) { ... }，排除第三方组件内的标签命中全局样式。
• 启用CSS模块化能力隔离样式作用域
  不管是使用CSS Modules、框架原生的scoped样式（如Vue <style scoped>）还是CSS-in-JS方案，都可以从编译层面限制样式的作用范围，你在组件内编写的标签选择器只会作用于当前组件内的元素，不会溢出到全局影响第三方组件。
• 临时兼容可调整样式加载顺序
  如果需要快速修复问题，可以将第三方依赖的样式导入语句调整到全局样式的后面，利用CSS优先级规则让第三方样式覆盖全局样式，该方案仅作为临时救急使用，不建议长期依赖。

你想到的两个方案中，「每个页面单独设置按钮样式」仅适合小型项目，项目规模扩大后会产生大量重复样式，维护成本较高，建议搭配组件封装的方案一起使用。 #

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