为 Google 可视化表格图表设置选定的行 css 属性

Question

我很难理解在 Google Visualization API 中使用 cssClassNames 属性时 CSS 属性是如何被覆盖的，我认为从文档 here 中可以清楚地看到它，但不知何故我无法让它工作。

我的最终目标是为选定的行设置自定义背景颜色。到目前为止，我一直在使用 cssClassNames 为所选行指定一个类，并将其设置在我的 CSS 文档中。我可以看到字体属性正常工作（字体样式、文本装饰等），但是当尝试使用背景颜色属性时它就不起作用了！

我的js：

  google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawTable);

  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike',  {v: 10000, f: '$10,000'}, true],
      ['Jim',   {v:8000,   f: '$8,000'},  false],
      ['Alice', {v: 12500, f: '$12,500'}, true],
      ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);
    var cssClassNames = {
       'selectedTableRow': 'selectedTableRow',
       'oddTableRow': 'selectedTableRow'};
            var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};
    var table = new google.visualization.Table(document.getElementById('table_div'));

    table.draw(data, options);
  }

还有 CSS：

.selectedTableRow {
  font-style: italic;
  color: purple;
  font-size:15px;
  text-decoration: underline;
  border: 3px solid gold;
  background-color: beige;
}

https://jsfiddle.net/6e2xw5cd/4/

我也尝试了其他可用的类，但这些似乎能够很好地实现 CSS 背景属性。在下面的 JSFiddle 上，您可以注意到将oddTableRows 设置为与 selectedTableRows 相同时的行为：https://jsfiddle.net/3kecdaz0/

所以我想知道是否可以为 Google 可视化图表表格元素中的选定行设置背景属性？

Answer 1

我认为你应该使用background-color: beige !important; 来覆盖背景颜色。

.selectedTableRow {
    font-style: italic;
    color: purple;
    font-size:15px;
    text-decoration: underline;
    border: 3px solid gold;
    background-color: beige !important;
  }

Fiddle

或者尝试在 table.css 之后包含您的自定义 css 文件。

Answer 2

为了覆盖属性值，您必须添加 !important;

更改background-color: beige;到

background-color: beige !important;