React Native UI Kitten：如何仅在单页覆盖Spinner和Progress Bar默认颜色

直接给组件传backgroundColor没用，是因为这个样式只会作用在组件的外层容器上，而进度条的填充部分、加载指示器的动画元素是组件内部的子元素，得针对这些元素设置样式。下面是两种组件的具体修改方法：

ProgressBar 修改方法 #

方法1：使用组件专属的进度样式属性（React Native 场景） #

EVA的ProgressBar提供了progressStyle属性，专门用来设置进度条填充部分的样式，直接传这个属性就能覆盖默认颜色：

<ProgressBar
  size="giant"
  progress={progress_value}
  progressStyle={{ backgroundColor: "pink" }}
/>

方法2：通过CSS变量或类选择器覆盖（Web 场景） #

如果是Web端项目，可以用自定义CSS变量直接在组件的style里设置，或者给组件加本地类后写CSS覆盖内部元素：

• 用内联CSS变量：

<ProgressBar
  size="giant"
  progress={progress_value}
  style={{ "--eva-progress-fill-color": "pink" }}
/>

• 用本地类+CSS：

<ProgressBar
  size="giant"
  progress={progress_value}
  className="custom-pink-progress"
/>

然后在页面的样式中添加：

.custom-pink-progress .eva-progress-bar__fill {
  background-color: pink !important;
}

Spinner 修改方法 #

Spinner的颜色可以直接通过color属性设置，或者用CSS变量覆盖：

直接传color属性 #

<Spinner
  size="large"
  color="pink"
/>

用CSS变量（Web 场景） #

如果color属性不生效，试试内联样式设置变量：

<Spinner
  size="large"
  style={{ "--eva-spinner-color": "pink" }}
/>

以上方法都只会作用在当前页面的组件上，不会改动全局的EVA配色方案。

内容的提问来源于stack exchange，提问作者R700