如何隐藏Input.TextArea获取焦点时的浅蓝色边框？

问题场景 #

使用Ant Design的Input.TextArea组件实现输入框时，获取焦点会显示默认的浅蓝色边框，尝试基础CSS样式无法覆盖：

现有JSX代码 #

<div className="input-box">
    <Input.TextArea
        id="talkInput"
        rows={1}
        value={inputValue}
        ref={inputRef}
        onChange={handleChatInputChange}
        onKeyPress={handleEnterKey}
        placeholder="input some message，press Enter to send" />
    <Button icon={<SendOutlined style={{ 
        display: 'flex', 
        alignItems: 'center', 
        transform: 'rotate(-45deg)',
        justifyContent: 'center' }}/>}
        loading={loadings}
        onClick={handleSend}
    ></Button>
</div>

无效的尝试 #

textarea:focus {
  outline: none;
  border: none;
}

textarea:focus {
  outline: none;
  border: none;
  border: 0px solid white;
}

可行解决方案 #

1. 利用组件自带属性直接关闭边框 #

Ant Design的Input.TextArea提供了bordered属性，设置为false可以直接移除所有边框（包括焦点状态）：

<Input.TextArea
    id="talkInput"
    rows={1}
    value={inputValue}
    ref={inputRef}
    onChange={handleChatInputChange}
    onKeyPress={handleEnterKey}
    placeholder="input some message，press Enter to send"
    bordered={false} />

2. 提升CSS选择器优先级覆盖样式 #

Ant Design的焦点样式通过.ant-input-textarea:focus类定义，普通选择器优先级不足，需要更精准的选择器：

/* 针对容器内的TextArea，精准覆盖 */
.input-box .ant-input-textarea:focus {
  outline: none;
  border-color: transparent; /* 透明边框 */
  box-shadow: none; /* 移除焦点时的阴影效果 */
}

若需要应急，也可使用!important强制覆盖（不推荐长期使用）：

textarea:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

3. 模块化样式方案（CSS Modules/styled-components） #

如果项目使用模块化样式，给组件添加自定义类名后，直接在模块化文件中编写样式：

// 假设使用CSS Modules
import styles from './InputBox.module.css';

<Input.TextArea
    className={styles.customTextarea}
    // 其他属性...
/>

/* InputBox.module.css */
.customTextarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

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