css - 如何使 Web 小部件样式与不同主题兼容？

Question

我正在制作一个应用程序来在不同的在线商店生成自定义产品页面。它基于模板。示例页面是这样的。问题是我的模板不能支持各种 Shopify 主题。

想想控制页眉和页脚的商店主题，我的模板适合内容。

我正在考虑解决办法。目前，我正在编写内联 CSS 来覆盖主题样式。但有时我的模板看起来仍然损坏，例如我正在使用 Dawn 主题进行开发，但它不适用于“Theme X”。因为主题将按钮宽度定义为 16%。而且我不知道这个主题。

我的问题是：

1. 鉴于我不知道并且无法测试所有主题，如何使样式与更多主题兼容？

2. 假设我为这个按钮添加了一个 100% 宽度的内联样式作为补丁，我怎么知道我没有破坏其他主题？

3. 像实时聊天小部件这样的网络小部件处理这个问题的当前方式是什么？也许我可以借用他们的解决方案？

标签： csswebwidgetshopifyshopify-template