Antd TreeSelect Overwrite CSS

Question

I am using the treeSelect component of the Antd library and I wanna change the way it looks. In particular, I wanna remove the border that it has around it and add only the border-bottom property. Using inspect, I have to override the

.ant-select:not(.ant-select-customize-input) .ant-select-selector {
    position: relative;
    /* background-color: #fff; */
    border: 1px solid #d9d9d9;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

I have tried some things that I found online, such as using the styled from styled-components but it does not work. I also tried to use the style or className property inside the treeSelect component but didn't work also.

I've tried:

const StyledTreeSelect = styled(TreeSelect)`
  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border: none 0;
    border-bottom: 1px solid #000;
}
`;

or

const StyledTreeSelect = styled(TreeSelect)`
    border: none 0;
    border-bottom: 1px solid #000;
`;

Answer 1

You can add custom className to TreeSelect like this:

<TreeSelect className="tree-select-with-only-bottom-border"

and use it to override default styles like this:

.tree-select-with-only-bottom-border.ant-select-outlined:not(
    .ant-select-customize-input
  )
  .ant-select-selector {
  border: 0;
  border-bottom: 1px solid #000;
}

You can take a look at this StackBlitz for a live working example.