react-mentions组件文本域获焦时修改边框颜色不生效如何解决

问题原因与修复方案 #

• 1. 未开启多行模式
     你当前修改的边框样式全部放在&multiLine规则下，而react-mentions的MentionsInput组件默认是单行模式，只有传入multiLine={true}属性，才会匹配&multiLine下的所有样式规则。
• 2. 样式选择器转义错误
     JS对象中的样式选择器不需要做HTML实体转义，你写的&属于HTML转义后的字符，组件无法识别为选择器占位符，需要全部改成原生的&。
• 3. 可能存在默认轮廓干扰
     浏览器默认会给获焦的输入框加outline样式，你没有手动关闭的话，会覆盖你设置的边框样式效果。

修改后的代码 #

样式文件修改：

export default {
  control: {
    backgroundColor: '#fff',
    fontSize: 14,
    fontWeight: 'normal',
  },

  '&multiLine': {
    control: {
      fontFamily: 'monospace',
      minHeight: 63,
    },
    input: {
      padding: 9,
      border: '1px solid silver',
      outline: 'none', // 关闭浏览器默认焦点轮廓
      '&focused': {
        border: '1px solid black',
      },
    },
  },

  suggestions: {
    list: {
      backgroundColor: 'white',
      border: '1px solid rgba(0,0,0,0.15)',
      fontSize: 14,
    },
    item: {
      padding: '5px 15px',
      borderBottom: '1px solid rgba(0,0,0,0.15)',
      '&focused': {
        backgroundColor: '#cee4e5',
      },
    },
  },
}

组件代码修改：

const MentionInput = ({ options }) => {
  let [data, setData] = useState("");

  function handleChange(e) {
    setData(e.target.value);
  }

  return (
    <>
      <MentionsInput
        value={data}
        onChange={handleChange}
        className="h-full"
        style={defaultStyle}
        multiLine={true} // 新增开启多行模式，匹配对应样式规则
      >
        <Mention
          trigger="@"
          markup="@__display__ "
          data={options}
          appendSpaceOnAdd={true}
          displayTransform={(id, display) => {
            return `@${display}`;
          }}
        />
      </MentionsInput>
    </>
  );
};

补充方案（上述修改仍不生效时使用） #

如果存在自定义类样式优先级覆盖的问题，可以直接通过全局CSS强制覆盖样式：

/* 可根据实际类名调整选择器 */
.h-full .mentionsInput__input:focus {
  border: 1px solid black !important;
  outline: none !important;
}

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