无法修改Mantine PasswordInput组件聚焦时的边框颜色

核心原因 #

Mantine输入组件的聚焦高亮样式，默认往往不是通过border-color控制，而是用outline、box-shadow或者带有更高优先级的内联样式/伪元素实现，导致你的自定义CSS被覆盖。

具体解决方案 #

1. 尝试修改outline样式

多数Mantine输入组件聚焦时依赖outline而非border，直接修改outline属性：

.mantine-PasswordInput-input:focus {
  outline-color: #60bc3e;
  /* 若需要统一边框样式，可补充 */
  /* outline-style: solid; */
}

2. 提升CSS优先级

如果默认样式优先级更高，用更具体的选择器或!important（应急场景使用，不推荐长期依赖）：

/* 更具体的选择器 */
div.mantine-PasswordInput-root .mantine-PasswordInput-input:focus {
  border-color: #60bc3e;
  outline-color: #60bc3e;
}

/* 或使用!important */
.mantine-PasswordInput-input:focus {
  border-color: #60bc3e !important;
  outline-color: #60bc3e !important;
}

3. 检查并修改box-shadow

部分Mantine主题用box-shadow模拟聚焦高亮，此时需要调整box-shadow属性：

.mantine-PasswordInput-input:focus {
  box-shadow: 0 0 0 2px #60bc3e;
  border-color: #60bc3e;
}

4. 使用Mantine官方自定义方案（推荐）

利用组件自带的classNames或sx属性，从根源避免优先级冲突：

// 方式一：classNames
<PasswordInput
  classNames={{
    input: 'custom-password-input'
  }}
/>

/* 对应CSS */
.custom-password-input:focus {
  border-color: #60bc3e;
  outline-color: #60bc3e;
}

// 方式二：sx prop
<PasswordInput
  sx={{
    input: {
      '&:focus': {
        borderColor: '#60bc3e',
        outlineColor: '#60bc3e'
      }
    }
  }}
/>

5. 基于[data-focus]属性选择器

Mantine部分组件聚焦时会添加data-focus属性，可直接用该选择器：

.mantine-PasswordInput-input[data-focus] {
  border-color: #60bc3e;
  outline-color: #60bc3e;
}

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