Native Base中_focus伪类无法修改Input组件部分样式的问题

问题原因 #

该配置失效不是框架bug，是Chakra UI的Input组件默认聚焦规则导致：

• Input默认聚焦状态自带outline边框高亮属性，优先级高于自定义的borderColor配置
• 默认同时会添加box-shadow聚焦阴影效果，也会遮盖自定义边框的视觉表现
• 若使用Chakra UI v2及以上版本，Input作为复合组件，输入框核心样式需要定义在baseStyle.field字段下，直接写在baseStyle根节点下的样式优先级不足

解决方案 #

方案1（适配v1版本）

在现有_focus配置中新增禁用默认高亮的属性即可：

export const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
        borderColor: baseColors.flamingo, 
        borderRadius: 20,
        backgroundColor: 'white',
        _focus: {
          borderColor: baseColors.flamingo, 
          backgroundColor: baseColors.flamingo,
          // 新增以下两行禁用默认高亮
          outline: 'none',
          boxShadow: 'none'
        }
      },
    },
  }
})

方案2（适配v2及以上版本）

将样式迁移到baseStyle.field字段下：

export const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
        field: {
          borderColor: baseColors.flamingo, 
          borderRadius: 20,
          backgroundColor: 'white',
          _focus: {
            borderColor: baseColors.flamingo, 
            backgroundColor: baseColors.flamingo,
            outline: 'none',
            boxShadow: 'none'
          }
        }
      },
    },
  }
})

排查补充 #

如果修改后依旧不生效，可检查两点：

• 项目中没有全局CSS规则直接覆盖Input组件的border属性
• baseColors.flamingo是已经正确注册到主题中的有效色值，不存在未定义的情况

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