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

Question

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

要修改UI外观，我已经对插件附带的样式表做了轻微的更改。

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

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

Answer 1

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

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

例如：

在原始数据表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

将单独样式表中所需的样式更改写入比默认DataTable样式表中更高优先级的选择器中。