Split View组件样式未生效：--cx-active-view等自定义样式无法应用

问题根因 #

CX SplitView 组件的CSS变量绑定逻辑受Angular视图封装、组件输入参数、DOM解析异常三类问题影响，对应修复方案如下：

1. 修复Angular视图封装导致的变量无法穿透问题

Angular默认启用样式隔离，组件内部定义的CSS变量无法作用于导入的第三方组件DOM，两种修复方式二选一：

• 方式1：在全局样式文件（如src/styles.scss）中添加变量声明：

cx-split-view, cx-view {
  --cx-active-view: 2;
  --cx-view-position: 0;
}

• 方式2：在使用SplitView的组件样式中用::ng-deep穿透样式隔离：

/* 当前使用SplitView的组件的样式文件 */
:host ::ng-deep cx-split-view, 
:host ::ng-deep cx-view {
  --cx-active-view: 2;
  --cx-view-position: 0;
}

2. 优先使用组件输入属性绑定（推荐）

SplitView 组件本身支持输入属性自动同步CSS变量，无需手动写样式，直接给cx-split-view添加activeView输入绑定即可：

<cx-split-view [hideMode]="false" [activeView]="2">
    <cx-view [viewPosition]="0">
       <cx-table></cx-table>
    </cx-view>
 <router-outlet></router-outlet>
</cx-split-view>

3. 修复现有HTML语法错误

你提供的第一段代码存在属性引号未闭合问题，会导致DOM解析异常，打断组件样式绑定逻辑，修复如下：

<cx-view class="card">
  <div class="header">
    <div class="title-bar">
    </div>
  </div>
</cx-view>
<router-outlet></router-outlet>

4. 路由加载场景的额外配置

如果第二个视图是通过路由加载的，需要在路由配置中给对应路由添加data属性，SplitView会自动读取配置同步变量：

// 路由配置文件
const routes = [
  {
    path: 'your-path',
    component: YourSecondComponent,
    data: {
      activeView: 2,
      viewPosition: 0
    }
  }
]

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