如何避免直接样式表修改插件

Question

我的应用程序中有datatable个插件。

要修改UI外观，我对插件附带的样式表进行了细微更改。

直接更改插件附带的样式表不是一个好主意，因为对插件的任何更新都将覆盖任何自定义更改。

有没有办法避免这个问题？

Answer 1

您可以覆盖它使用的任何CSS类（请参阅完整列表here）。

然后您只需创建另一个CSS文件，该文件将在插件的css文件后加载并覆盖它的类（或使用其他CSS技术来获得更高的CSS优先级）。

例如：

在原始的DataTables CSS（demo_table.css）文件中，您可以找到：

.sorting_desc_disabled
{
     background: url('../images/sort_desc_disabled.png') no-repeat center right;
}

假设您想要另一个箭头图标，您需要创建自己的CSS文件（my_demo_table.css）：

.sorting_desc_disabled
{
     background: url('../images/my_own_disabled_arrow.png') no-repeat center right;
}

同样，您必须确保在原始CSS之后加载自定义CSS，或者利用CSS Specifity Rules使您的自定义样式优先于原始样式。

Answer 2

使用优先级高于默认DataTables样式表的选择器，在单独的样式表中编写所需的样式更改。