如何避免AG Grid主题覆盖Voila主题？

使用Voila展示AG Grid表格时，表格创建后Voila的主题被意外更改。原本设置Voila为“dark”主题，表格渲染完成后主题自动切换为“light”。

最小复现代码 #

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from time import sleep\n",
    "from ipyaggrid import Grid\n",
    "print('Theme is dark now')\n",
    "sleep(10)\n",
    "Grid(grid_data=[{'Foo': 'spam', 'Bar': 'eggs'}], grid_options={'columnDefs': [{'field': 'Foo'}, {'field': 'Bar'}]})\n",
    "print('Theme is light now')"
   ]
  }
 ],
 "metadata": {
  "jupytext": {
   "formats": "ipynb,py:light",
   "text_representation": {
    "extension": ".py",
    "format_name": "light",
    "format_version": "1.4",
    "jupytext_version": "1.2.0"
   }
  },
  "kernelspec": {
   "display_name": "Python 3.8.10 ('env_local')",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.10"
  },
  "voila": {
   "theme": "dark"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}

使用版本 #

• voila == 0.4.0
• ipyaggrid == 0.4.0

方法1：指定AG Grid使用深色主题 #

ipyaggrid默认加载AG Grid的light主题样式，会覆盖Voila的dark主题。创建Grid时可显式指定深色主题：

Grid(
    grid_data=[{'Foo': 'spam', 'Bar': 'eggs'}],
    grid_options={'columnDefs': [{'field': 'Foo'}, {'field': 'Bar'}]},
    theme='ag-theme-alpine-dark'  # 也可选用ag-theme-balham-dark等其他AG Grid深色主题
)

方法2：禁用ipyaggrid默认主题加载 #

若要完全沿用Voila的dark主题样式，可配置阻止ipyaggrid加载自带主题CSS：

Grid(
    grid_data=[{'Foo': 'spam', 'Bar': 'eggs'}],
    grid_options={'columnDefs': [{'field': 'Foo'}, {'field': 'Bar'}]},
    css_rules="",
    load_theme=False
)

之后可自定义CSS，让表格样式与Voila的dark主题适配。

方法3：升级依赖版本 #

较新的ipyaggrid和voila版本可能已修复主题冲突问题，尝试升级到稳定版：

pip install --upgrade voila ipyaggrid

内容的提问来源于stack exchange，提问作者Diego F Medina