如何导入第三方库.css文件而不覆盖自定义.scss样式？

方法一：父容器类隔离样式 #

直接导入完整的RSuite CSS会污染全局样式，你可以给日期选择器套一个专属父容器，把RSuite样式嵌套在这个容器的选择器下，限定样式作用范围：

1. 在组件index.tsx中添加父容器：

<div className="rsuite-date-range-wrapper">
  <DateRangePicker /> {/* 你的RSuite范围日期选择器 */}
</div>

2. 修改styles.scss，将RSuite的CSS导入嵌套在容器类中：

@use '../../../styles/breakpoints';
@use '../../../styles/fonts';
@use '../../../styles/colors';

.rsuite-date-range-wrapper {
  @import '~rsuite/dist/rsuite.min.css';
}

这样所有RSuite样式只会作用于该容器内部，不会影响项目全局样式。

方法二：按需导入组件专属样式 #

如果使用RSuite 5及以上版本，官方支持按需加载组件和对应样式，只导入范围日期选择器的样式即可：

在index.tsx中直接导入组件和其单独样式：

import './styles.scss';
import { DateRangePicker } from 'rsuite';
import 'rsuite/DateRangePicker/styles/index.css';

这种方式只会加载该组件相关的样式，不会引入RSuite的全局重置样式（比如全局字体、默认内边距等），从根源避免样式冲突。

方法三：覆盖RSuite全局变量（进阶） #

若需要保留RSuite组件样式但要避免全局冲突，可以通过Sass变量覆盖RSuite的全局默认值：

@use '../../../styles/breakpoints';
@use '../../../styles/fonts';
@use '../../../styles/colors';

// 覆盖RSuite全局变量，替换成项目自身的样式配置
$body-font-family: '你的项目字体';
$body-padding: 0;
$base-spacing: 8px; // 按需调整其他变量

// 导入RSuite的Sass源码而非编译后的CSS
@import '~rsuite/src/styles/index.scss';

这种方法需要熟悉RSuite的Sass变量体系，适合需要全局统一调整RSuite样式的场景。

内容的提问来源于stack exchange，提问作者Juan Francisco Ruiz