如何解决React CurrencyInput初始文字颜色仅输入后生效问题

你观察到的“敲字后才显示水蓝色、初始加载是灰色”的现象，本质是两个样式规则的缺失叠加导致的：

• 当输入框初始value为空时，实际渲染展示的是你配置的$0.00占位内容，浏览器会给这类占位文本套用原生默认的浅灰色样式，你当前的全局样式只设置了普通输入文本的颜色，没有覆盖占位内容的专属样式，所以初始状态看到的灰色其实是placeholder的默认颜色。
• 全局input选择器的优先级偏低，部分场景下项目引入的UI组件库、react-text-mask自带的基础input样式，会因为引入顺序靠后覆盖你的全局规则。直到触发输入事件、组件重新渲染时，规则匹配优先级才发生变化，最终让输入的文本显示为水蓝色，形成了“样式只对输入内容生效”的错觉。

1. 补齐占位文本的颜色覆盖规则 #

直接在全局input样式块里，适配不同浏览器的placeholder伪类选择器，把占位文本的颜色也设置成目标水蓝色，避免初始加载时被默认灰色覆盖：

input {
  color: #29bbe3;
  /* 兼容主流浏览器的placeholder样式 */
  &::placeholder {
    color: #29bbe3;
  }
  &::-webkit-input-placeholder {
    color: #29bbe3;
  }
  &::-moz-placeholder {
    color: #29bbe3;
    opacity: 1; /* 火狐浏览器默认placeholder带半透明，需要单独重置 */
  }
  &:-ms-input-placeholder {
    color: #29bbe3;
  }
}

注意：如果你的样式是用sass写的，要确保$aqua-blue变量已经被正确编译为#29bbe3输出到最终的css文件里，如果变量没有被正确注入，会直接导致整个color规则失效。

2. 提高样式选择器优先级，覆盖组件默认样式 #

如果补齐placeholder规则后还是出现初始加载灰色的问题，说明现有选择器的权重不够，被更高优先级的默认样式覆盖了，可以通过增加选择器权重的方式强制生效：

/* 针对CurrencyInput渲染的input元素提升优先级 */
input[class*="currency"],
input {
  color: #29bbe3;
  &::placeholder {
    color: #29bbe3;
  }
}

旧版react-text-mask会在input元素上挂载内联样式，如果上面的写法还是覆盖不了，可以在内联样式冲突的场景下对必要的color规则加!important强制生效，避免被组件内联样式抢占优先级。

3. 组件内部透传默认样式，从根源解决渲染时序问题 #

如果不想依赖全局样式的优先级匹配，也可以直接在自定义封装的CurrencyInput组件内部，默认补上颜色配置，让组件挂载时就带上正确的样式，不需要等待输入事件触发才匹配样式规则：
修改CurrencyInput组件的逻辑，合并用户传入的样式配置，默认带上水蓝色样式：

const CurrencyInput = ({ maskOptions, style, className, ...inputProps }) => {
  const currencyMask = createNumberMask({
    ...defaultMaskOptions,
    ...maskOptions,
  })
  // 合并默认样式和用户自定义传入的样式
  const mergedStyle = {
    color: '#29bbe3',
    ...style
  }
  return <MaskedInput 
    mask={currencyMask} 
    {...inputProps} 
    style={mergedStyle}
    className={className}
  />
}

这种方式不会受全局样式引入顺序、选择器优先级的影响，组件初始渲染时就会给原生input元素挂载对应的颜色样式，从根源上解决初始加载样式不对的问题。

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