为什么React组件库更倾向于使用基于prop的样式方案？

1. 内置校验，降低开发错误 #

• 大部分支持TypeScript的组件库会给样式props添加类型定义，传值不符合要求时开发阶段就会抛出提示，完全避免了手写Bootstrap类名时的拼写错误、漏写类名等问题，比如不会出现把text-danger写成text-dager这类低级错误。

2. 语义化更强，降低使用成本 #

• 不用记忆大量Bootstrap的类名规则，只需要调用组件暴露的语义化参数即可，比如要调整卡片的圆角大小，直接传radius="large"就够了，不用每次都手动组合rounded、rounded-lg等类名，也不用费心记忆类名的对应关系。

3. 样式隔离，避免冲突 #

• 组件库通常会通过CSS模块化、CSS-in-JS、Shadow DOM等方案做样式作用域隔离，通过props传递的样式优先级可控，不会和全局的Bootstrap类名产生优先级冲突，也不用额外写自定义样式去覆盖全局类名的默认属性。

4. 动态样式实现更简洁 #

• 做状态联动、响应式适配时，直接控制props的变量值即可，不需要拼接复杂的类名字符串。可以参考下面的代码对比：

直接使用Bootstrap类名的写法 #

<button 
  className={`btn btn-${btnSize} ${isPrimary ? 'btn-primary' : 'btn-default'} ${isDisabled ? 'disabled' : ''}`}
>
  提交
</button>

组件库props传样式的写法 #

<Button
  size={btnSize}
  type={isPrimary ? 'primary' : 'default'}
  disabled={isDisabled}
>
  提交
</Button>

5. 设计规范统一，适合团队协作 #

• 样式props允许传入的值都是组件库预设好的，符合整套设计系统的规范，不会出现手写类名时随意组合、自定义数值导致的视觉风格不统一的问题，多人协作的项目里能有效降低视觉走查的成本。

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