angular - 如何禁用 Handsontable 热表正文中第一行的第一个正文字体样式？

Question

我正在努力在我的 Angular 前端显示一个 Handsontable。当我给出数据时。显示表格时，正文的第一行具有使其看起来像标题的字体样式（粗体、较大、颜色）。

这是我的实现的副本：

// app.component.ts
import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';

@Component({
  selector: 'app-root',
  template: `
  <div>
    <hot-table
      [data]="dataset"
      [colHeaders]="true"
      [rowHeaders]="true"
      height="auto"
      licenseKey="non-commercial-and-evaluation">
        <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
        <hot-column data="name" title="Full name"></hot-column>
        <hot-column data="address" title="Street name"></hot-column>
    </hot-table>
  </div>
  `,
})
class AppComponent {
  dataset: any[] = [
    {id: 1, name: 'Ted Right', address: 'Wall Street'},
    {id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},
    {id: 3, name: 'Joan Well', address: 'Broadway'},
    {id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
    {id: 5, name: 'Michael Fair', address: 'Lombard Street'},
    {id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
    {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
    {id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
  ];
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HotTableModule } from '@handsontable/angular';

@NgModule({
  imports:      [ BrowserModule, HotTableModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
class AppModule { }

// bootstrap
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });

我尝试使用以下方法定位 css 中的特定元素：

tbody tr:first-child {
font-size: xx-small;
}

这似乎不起作用。

有没有可以用来删除该行样式的选项或其他方法？

显示图片如下：

标签： angulartypescripthandsontable

Answer 1

CSS 中的所有样式都必须连接到 TH 或 TD。您可能会发现此示例很有帮助http://jsfiddle.net/znkmwfpt/1/其中 JS 部分仅使用标头钩子 ( afterGetColHeader) 来附加className.

afterGetColHeader: function(col, TH) {
      var TR = TH.parentNode;
      var THEAD = TR.parentNode;
      var headerLevel = (-1) * THEAD.childNodes.length + Array.prototype.indexOf.call(THEAD.childNodes, TR);

      function applyClass(elem, className) {
        if (!Handsontable.dom.hasClass(elem, className)) {
          Handsontable.dom.addClass(elem, className);
        }
      }

CSS 部分

* {
  font-family: Verdana, Helvetica, Arial, FreeSans, sans-serif;
  font-size: 12px;
}

.handsontable THEAD TH.color1 {
  background: #FF6138;
  border-color: #D4441F;
}

.handsontable THEAD TH.color1 .collapsibleIndicator {
  box-shadow: 0px 0px 0px 6px #FF6138;
  -webkit-box-shadow: 0px 0px 0px 6px #FF6138;
  background: #FF6138;
  border-color: #D4441F;
}

.handsontable THEAD TH.color2 {
  background: #79BD8F;
  border-color: #549A6B;
}

.handsontable THEAD TH.color2 .collapsibleIndicator {
  box-shadow: 0px 0px 0px 6px #79BD8F;
  -webkit-box-shadow: 0px 0px 0px 6px #79BD8F;
  background: #79BD8F;
  border-color: #549A6B;
}

.handsontable THEAD TH.color3 {
  background: #BEEB9F;
  border-color: #8FC768;
}

.handsontable THEAD TH.color3 .collapsibleIndicator {
  box-shadow: 0px 0px 0px 6px #BEEB9F;
  -webkit-box-shadow: 0px 0px 0px 6px #BEEB9F;
  background: #BEEB9F;
  border-color: #8FC768;
}

.handsontable THEAD TH.color4 {
  background: #FFFF9D;
  border-color: #DEDE9A;
}

.handsontable THEAD TH.color4 .collapsibleIndicator {
  box-shadow: 0px 0px 0px 6px #FFFF9D;
  -webkit-box-shadow: 0px 0px 0px 6px #FFFF9D;
  background: #FFFF9D;
  border-color: #DEDE9A;
}

.handsontable THEAD TH.color5 {
  background: #00A388;
  border-color: #38887B;
}

.handsontable THEAD TH.color5 .collapsibleIndicator {
  box-shadow: 0px 0px 0px 6px #00A388;
  -webkit-box-shadow: 0px 0px 0px 6px #00A388;
  background: #00A388;
  border-color: #38887B;
}

此外，某些属性正在使用!important，因此您可能还需要添加它。