ant design: modify border-radius for Input component

Question

I have the following ant design search input component:

 <Search
  size="large"
  placeholder="Search..."
  className="dashboardSearch"
  />

I am trying to modify the border radius to give it a circular shape but everything i try in my css file doesnt work.

css file:

.dashboardSearch {
    width: 300px;
    border-radius: 25px;

}

.ant-input-search {
    width: 300px;
    border-radius: 25px;
}

is there anyway to modify the border radius of the search input component? usually when I modify the ant design class name directly it works. but in this case it doesn't. Is there another way that I am missing?

Answer 1

You need to target .antd-input class inside the Input.Search.

For example with CSS-in-JS:

const RoundSearch = styled(Input.Search)`
  .ant-input {
    border-radius: 25px;
  }
`;

export default function App() {
  return (
    <FlexBox>
      <RoundSearch />
    </FlexBox>
  );
}

Or in your case:

.dashboardSearch {
  .ant-input {
    border-radius: 25px;
  }
}