如何自定义nb-stepper组件头部样式或将其设置为RTL方向

自定义样式不生效的核心原因是Angular默认开启视图封装，组件内部编写的CSS仅作用于当前组件的直接DOM节点，无法穿透到Nebular封装的nb-stepper内部DOM结构，因此本地编写的样式无法生效。可选择以下任意方案实现需求：

• 方案1：单组件临时调整（无全局污染）
  在当前使用nb-stepper的组件CSS文件中，使用::ng-deep结合:host选择器穿透视图封装，仅作用于当前组件内的步骤条：

:host ::ng-deep .stepper-header {
  flex-flow: row-reverse !important;
}

• 方案2：全局自定义类控制（更易维护）
  如果需要在多处使用RTL步骤条，先给nb-stepper添加自定义类名：

<nb-stepper class="rtl-stepper">
  <!-- 步骤内容 -->
</nb-stepper>

在项目全局样式文件（通常为src/styles.scss）中添加对应样式：

nb-stepper.rtl-stepper .stepper-header {
  flex-flow: row-reverse;
}

该方案无需使用穿透选择器，也不会污染默认的nb-stepper样式。

• 方案3：使用Nebular内置RTL配置（最规范）
  如果你的整个项目都需要RTL方向适配，直接使用Nebular官方的RTL支持，所有组件会自动适配反向布局，无需手动写样式：
  在根模块app.module.ts的NbThemeModule配置中添加方向参数：

import { NbThemeModule } from '@nebular/theme';

@NgModule({
  imports: [
    NbThemeModule.forRoot({
      name: 'your-theme-name',
      direction: 'rtl' // 全局开启RTL
    }),
    // 其他模块导入
  ]
})
export class AppModule { }

如果仅需要局部切换方向，也可以调用NbDirectionService动态设置。

实现效果如下：

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