如何重置CSS fill属性恢复Google Visualization Chart原始色彩?
解决Google Visualization Chart被全局CSS fill属性覆盖的问题
当全局设置了* { fill: black; }时,Google可视化图表的默认颜色会被强制覆盖,而#chart_div * { fill: unset; }无法解决问题——原因是unset会让SVG元素继承父级的fill值,而父级仍受全局样式影响。以下是可行的重置方案:
使用
revert关键字恢复组件原生样式revert会直接让元素回到Google Charts预设的样式规则,避开全局样式的干扰:#chart_div * { fill: revert; }针对SVG元素精准重置(更安全)
因为图表基于SVG渲染,可仅对容器内的SVG元素设置,避免影响其他内容:#chart_div svg * { fill: revert; }强制优先级(极端场景)
如果上述方法仍无效,可添加!important强制覆盖全局样式(尽量少用,仅作为兜底):#chart_div * { fill: revert !important; }
内容的提问来源于stack exchange,提问作者tengl
相关产品推荐
相关产品推荐

