Taiga UI v3迁移至v4后自定义CSS优先级失效问题排查

问题原因 #

1. 主题加载顺序变更：v4提升了官方主题样式的加载优先级，v3中你在:root定义的自定义变量能覆盖默认值，但v4里官方主题样式会以更高权重或更晚加载的方式，直接覆盖你的全局自定义变量。
2. 组件样式逻辑调整：v4部分组件（比如按钮）不再直接读取全局:root变量，而是直接引用主题包内primary.less的默认值，导致你自定义的--tui-primary无法生效。

修复方案 #

1. 调整样式加载顺序（最推荐） #

打开项目的angular.json，将你的自定义全局样式文件移到Taiga UI主题样式之后，让自定义变量后加载覆盖官方值：

"styles": [
  "node_modules/@taiga-ui/core/styles/taiga-ui-light-theme.less",
  "src/styles.less" // 你的全局样式文件放在主题后面
]

2. 使用官方推荐的主题扩展方式 #

v4更建议通过扩展主题来定制变量，而非直接在:root中定义：

• 新建custom-theme.less文件，内容如下：

@import "../node_modules/@taiga-ui/core/styles/taiga-ui-light-theme.less";

// 直接覆盖官方主题变量
@tui-primary: var(--primary-700);
// 其他需要修改的变量同理

• 在angular.json中替换原主题引用为这个自定义主题：

"styles": [
  "src/custom-theme.less",
  "src/styles.less"
]

3. 提升自定义变量权重 #

如果不想调整加载顺序，给自定义变量加双重:root选择器提高权重：

:root:root {
  --tui-primary: var(--primary-700);
}

双重:root的优先级高于单个:root，可以覆盖官方主题的变量定义。

4. 单个组件强制覆盖（临时应急方案） #

仅针对个别组件样式失效的情况，可使用::ng-deep穿透样式隔离（不推荐全局大量使用）：

::ng-deep .tui-button {
  background-color: var(--primary-700) !important;
}

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