如何创建自定义CSS边框，使报错的搜索组件与下拉框边框样式统一？

我来帮你搞定这个统一边框的问题！核心思路是创建一个统一的错误边框CSS类，然后在错误状态下分别应用到searchComponent容器和下拉框组件上，这样就能保证两者的样式完全一致了。具体步骤如下：

1. 创建统一的错误边框样式 #

首先在你的CSS/SCSS文件里定义一个全局的错误边框类，把你想要的红色高亮样式写进去，确保和searchComponent现有错误样式参数一致：

.error-border {
  border: 2px solid #dc3545; /* 替换成你需要的红色色调 */
  border-radius: 4px; /* 和searchComponent保持一致的圆角值 */
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); /* 可选：添加焦点高亮阴影增强视觉一致性 */
}

/* 针对下拉框内部结构的穿透样式（根据你的Select组件实际DOM调整） */
.error-border .select-input-wrapper {
  border: none; /* 去掉组件自带的边框，继承外层统一样式 */
}

提示：可以用浏览器开发者工具查看下拉框的内部DOM结构，把.select-input-wrapper替换成实际的类名，确保样式能正确作用到下拉框的输入区域。

2. 给searchComponent容器动态添加错误类 #

修改searchComponent所在的div，根据searchInputError状态自动切换错误类：

<div 
  className={`l-grid__col l-grid__col--5 searchComponent ${searchInputError ? 'error-border' : ''}`} 
  data-testid="searchComponent"
>
  {/* 内部Form和FormField代码保持不变 */}
</div>

3. 给下拉框组件应用统一错误类 #

给Select组件也动态添加error-border类，同时可以根据情况决定是否保留原有的hasError属性（如果自带样式和自定义类冲突，建议去掉hasError，用我们的统一类替代）：

<Select 
  data-testid="dropdown" 
  options={searchOptions()} 
  onSelect={e => {
    setParam(e.value);
    superOnChange(e.value, inputValue);
  }} 
  className={`${searchInputError ? 'error-border' : ''}`}
  value={inputValue} 
/>

如果必须保留hasError，可以通过提高自定义CSS选择器的优先级来覆盖组件自带样式，比如用.searchComponent .error-border这样更具体的选择器。

4. 验证效果 #

现在当输入验证失败、searchInputError变为true时，searchComponent容器和下拉框都会应用完全一致的红色高亮边框，视觉效果就统一啦！

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