如何在AG Grid Theme Builder中切换基础主题为Material？
2026-6-13
AG Grid主题构建器切换Material基础主题方案
一、在线版现状：无法直接切换基础主题
目前AG Grid官方在线主题构建器确实仅支持以Quartz作为唯一基础主题，左侧参数列表里没有切换基础主题的选项，你没有遗漏任何操作。
二、解决方案1：手动修改生成的代码
如果只是需要基于Material主题生成自定义样式，可以按以下步骤操作：
- 用在线构建器调整好你需要的视觉参数，点击
Use Theme获取生成的代码 - 将代码中的
import { themeQuartz } from 'ag-grid-community';替换为import { themeMaterial } from 'ag-grid-community'; - 注意：Material主题的部分参数名称和Quartz有差异，可能需要手动对应调整（比如颜色变量、组件样式参数），确保样式符合预期
三、解决方案2：本地运行主题构建器（适合给UX设计师使用）
AG Grid的主题构建器是开源的，可以本地部署并修改基础主题配置，步骤如下：
- 克隆AG Grid官方仓库：
git clone https://github.com/ag-grid/ag-grid.git - 进入主题构建器目录：
cd ag-grid/packages/ag-grid-theme-builder - 安装依赖：
npm install - 修改构建器的基础主题配置：找到项目中的主题配置文件（比如
src/theme-config.ts），将默认的基础主题从quartz改为material - 启动本地服务：
npm start - 访问本地构建器页面（通常是
http://localhost:3000），此时构建器会以Material为基础主题，设计师可以可视化调整参数并生成对应代码
内容的提问来源于stack exchange，提问作者kyrylomyr
相关产品推荐
相关产品推荐
