Google apps script 如何使HTML标签与Google'；s附加组件的CSS规范

Google文档和电子表格加载项需要遵循中所述的明确规则

但是像标签这样的规格无法更好地匹配此处显示的附加组件的外观：

---

此外，谷歌避免在文档附加组件中使用物化CSS。

自从我把它放在一起解决同样的问题以来，已经有几年了，特别是针对中的组件。它只需要在侧边栏中稍作调整即可工作

要使用，您可以复制样式信息并将其嵌入

Stylsheet.html

，或者从cdn.rawgit.com链接CSS，例如

例子 下面是一个示例电子表格加载项。代码基于先前链接的答案，该答案从开始

Stylesheet.html

标签{
字体大小：粗体；
}
.以下是品牌{
底部：54px；
排名：0；
}
.品牌文本{
左：7px；
位置：相对位置；
顶部：3px；
}
.标志{
垂直对齐：中间对齐；
}
.width-100{
宽度：100%；
框大小：边框框；
-webkit框大小：边框框；‌
-moz框大小：边框框；
}
#边栏值块，
#对话框元素{
背景色：#eee；
边框颜色：#eee；
边框宽度：5px；
边框样式：实心；
}
#边栏按钮栏，
#对话框按钮栏{
边缘底部：10px；
}

Sidebar.html

表1的内容

表2的内容

表3的内容

SidebarJavaScript.html

$（函数（）{
$（“#制表符”）.tabs（）；
});

代码.gs

/**
*@OnlyCurrentDoc将脚本限制为仅访问当前电子表格。
*/
var侧栏标题='示例侧栏'；
/**
*添加带有项目的自定义菜单以显示侧栏和对话框。
*
*@param{Object}是简单onOpen触发器的事件参数。
*/
功能开启（e）{
SpreadsheetApp.getUi（）
.createAddonMenu（）
.addItem（'显示侧栏'，'显示侧栏'）
.addToUi（）；
}
/**
*安装加载项时运行；调用onOpen（）以确保菜单创建和
*立即完成任何其他初始化工作。
*
*@param{Object}是简单onInstall触发器的事件参数。
*/
函数onInstall（e）{
onOpen（e）；
}
/**
*打开一个侧边栏。sidebar.html中描述了侧栏结构
*项目文件。
*/
函数showSidebar（）{
var ui=HtmlService.createTemplateFromFile（'侧栏'）
.评估（）
.setTitle（侧栏标题）
.setSandboxMode（HtmlService.SandboxMode.IFRAME）；
SpreadsheetApp.getUi（）.showSidebar（ui）；
}