【TDesign】如何修改CSS变量

Tdesign的组件想通过style定义样式没效果, 可以通过组件api文档修改,
组件提供了下列 CSS 变量，可用于自定义样式。
比如Cell, https://tdesign.tencent.com/miniprogram/components/cell?tab=api
提供了：
–td-cell-left-icon-color 图标颜色
–td-cell-title-color 标题文字颜色
等等。

如果想通过style给t-cell组件增加样式是没有效果的, 需要修改组件的css变量

page {
  --td-cell-left-icon-color:#000;
  --td-cell-title-color:#000;
}

包含在page里的组件可以这样修改
有些组件可能不会被包裹在 page 里，比如自定义 tab-bar。
此时，可以通过给组件增加 class 来实现：

<t-tab-bar class="custom-tab-bar">
  <t-tab-bar-item value="home" icon="home">home</t-tab-bar-item>
</t-tab-bar>

对应的 CSS 可以这么定义：

.custom-tab-bar {
  --td-tab-bar-item-color: red;
}