如何禁用Angular中Handsontable hot-table表格body首行的特殊字体样式

问题原因 #

你写的CSS未生效有两个核心原因：

1. Angular默认启用样式隔离（ViewEncapsulation.Emulated），组件内定义的样式无法命中Handsontable动态渲染的DOM元素
2. 你的选择器优先级远低于Handsontable内置的.htCore前缀样式，被内置样式覆盖了

解决方案 #

方案1：高优先级CSS覆盖（最快捷）

如果你想在组件样式文件内修改，添加::ng-deep穿透样式隔离，同时提高选择器优先级即可：

::ng-deep .htCore tbody tr:first-child td {
  font-size: inherit !important;
  font-weight: normal !important;
  color: inherit !important;
}

如果你不想用::ng-deep，可以直接把以下代码放到项目全局样式文件（通常是src/styles.css/styles.scss）中：

.htCore tbody tr:first-child td {
  font-size: inherit !important;
  font-weight: normal !important;
  color: inherit !important;
}

方案2：配置项排查

如果想要从根源避免该问题，检查你的Handsontable配置是否误开启了以下属性：

• fixedRowsTop：该属性值如果设为1，会把第一行数据固定在顶部作为类表头，自带特殊样式，默认值为0，你当前代码未配置该属性无需修改
• nestedHeaders：嵌套表头配置如果开启，会把第一行内容识别为子表头渲染，你当前代码未配置该属性无需修改

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