アプリケーションにデータテーブルプラグインがあります。
UI の外観を変更するために、プラグインに付属のスタイル シートにわずかな変更を加えました。
プラグインに付属するスタイル シートを直接変更することはお勧めできません。プラグインを更新するとカスタムの変更が上書きされるためです。
この問題を回避する方法はありますか?
アプリケーションにデータテーブルプラグインがあります。
UI の外観を変更するために、プラグインに付属のスタイル シートにわずかな変更を加えました。
プラグインに付属するスタイル シートを直接変更することはお勧めできません。プラグインを更新するとカスタムの変更が上書きされるためです。
この問題を回避する方法はありますか?
使用する任意の CSS クラスをオーバーライドできます (完全なリストはこちらを参照してください)。
次に、プラグインの 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 仕様規則を活用してカスタム スタイルを元のスタイルよりも優先する必要があります。
必要なスタイルの変更を、デフォルトの DataTables スタイルシートよりも優先順位の高いセレクターを持つ別のスタイルシートに記述します。