如何修改Shepherd JS引导组件的颜色与样式设置

1. 直接用CSS覆盖默认样式 #

Shepherd的UI元素都带有特定类名，直接针对这些类写CSS就能修改样式，比如把「下一步」按钮改成黄色：

/* 修改下一步按钮背景色 */
.shepherd-button--next {
  background-color: #ffd700 !important;
  border-color: #ffd700 !important;
}

/* 按钮悬停状态 */
.shepherd-button--next:hover {
  background-color: #ffcc00 !important;
  border-color: #ffcc00 !important;
}

其他常见元素的类名：

• 弹窗遮罩层：.shepherd-modal-overlay
• 弹窗主体容器：.shepherd-element
• 弹窗标题：.shepherd-header-title
• 弹窗内容：.shepherd-text

2. 给步骤添加自定义类名（不影响全局样式） #

在配置defaultStepOptions或单个步骤时，通过classes属性添加自定义类，再针对该类写样式，适合不同引导流程用不同样式：

// 全局默认步骤添加自定义类
const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'custom-yellow-theme',
    // 其他配置项...
  }
});

// 单个步骤单独设置类
tour.addStep({
  title: '示例步骤',
  text: '这个步骤的按钮是黄色的',
  classes: 'yellow-button-step',
  // 其他配置项...
});

对应的CSS：

.custom-yellow-theme .shepherd-button--next {
  background-color: #ffd700;
  border-color: #ffd700;
}

.yellow-button-step .shepherd-button--next {
  background-color: #ffd700;
}

3. SCSS项目直接覆盖变量（推荐） #

如果你的项目使用SCSS，可以直接覆盖Shepherd提供的内置变量，编译后自动替换默认样式，无需!important：

// 覆盖按钮相关变量
$shepherd-button-background: #ffd700;
$shepherd-button-hover-background: #ffcc00;
$shepherd-button-border-color: #ffd700;

// 导入Shepherd的SCSS文件
@import 'shepherd.js/dist/css/shepherd.css';

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