使用create-react-app时，如何避免React Suite v5样式全局覆盖？

方法1：调整样式导入顺序 #

在Create React App中，CSS优先级由导入顺序决定。将你的自定义CSS放在React Suite样式之后导入，让自定义样式获得更高优先级：

// 先导入React Suite全局样式
import 'rsuite/dist/rsuite.min.css';
// 再导入你的自定义CSS文件
import './your-custom-styles.css';

方法2：提升自定义样式的特异性 #

如果调整顺序无效，通过增强选择器特异性来覆盖React Suite样式。给组件外层添加自定义类名，再用更具体的选择器编写样式：

/* 自定义样式示例 */
.custom-wrap .rs-input-picker {
  border-radius: 4px;
  border-color: #ddd;
}

.custom-wrap .rs-date-range-picker {
  background-color: #f5f5f5;
}

组件中使用：

<div className="custom-wrap">
  <InputPicker />
  <DateRangePicker />
</div>

方法3：使用CSS Modules（推荐） #

Create React App默认支持CSS Modules，它会给样式类名添加唯一哈希值，彻底避免全局样式冲突：

1. 将自定义CSS文件命名为[name].module.css，比如ComponentStyles.module.css
2. 在组件中导入并使用：

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

// 组件内使用
<div className={styles.wrap}>
  <InputPicker />
  <DateRangePicker />
</div>

在ComponentStyles.module.css中编写样式：

.wrap .rs-input-picker {
  /* 自定义样式 */
}

关于单独导入组件Less无效的说明 #

React Suite v5的组件单独样式依赖Less编译环境，但Create React App默认未配置Less编译（除非手动eject或用craco修改配置），所以直接导入.less文件不会生效。新手无需折腾复杂配置，用前面三种方法即可解决问题。

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