如何修改Antd TreeSelect样式：移除边框仅保留底部边框

要实现移除TreeSelect四周边框、仅保留底部边框的效果，你之前的styled-components写法未生效，核心原因是选择器未正确绑定到当前组件实例，优先级没超过Antd的默认样式。以下是两种可行的解决方案：

方案一：正确使用styled-components嵌套选择器 #

利用&符号绑定当前组件的根类名，提升选择器优先级，确保覆盖Antd默认样式：

import styled from 'styled-components';
import { TreeSelect } from 'antd';

const StyledTreeSelect = styled(TreeSelect)`
  // 绑定当前组件的ant-select类，确保选择器只作用于当前实例
  &.ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border: none; // 移除所有边框
    border-bottom: 1px solid #000; // 保留底部边框
    border-radius: 0; // 去掉默认圆角，让底部边框更规整
    // 可选：保留原有的过渡动画
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
`;

// 使用时直接替换原TreeSelect
<StyledTreeSelect
  treeData={yourTreeData}
  placeholder="请选择"
  // 其他属性
/>

方案二：通过className结合全局样式（无需styled-components） #

如果不想用styled-components，也可以给TreeSelect自定义className，然后在全局CSS中编写样式：

// 组件中
<TreeSelect
  className="custom-tree-select"
  treeData={yourTreeData}
  placeholder="请选择"
/>

// 全局CSS文件中
.custom-tree-select.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
}

为什么之前的写法无效？ #

你之前的第一种写法未用&绑定当前组件的类，导致选择器全局匹配所有.ant-select元素，而styled-components生成的样式带作用域，无法正确命中目标；第二种写法直接给根组件加border，但TreeSelect的边框是在内部.ant-select-selector元素上，并非根元素，因此完全不起作用。

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