ant design：修改输入组件的边界半径

Question

我有以下 ant design 搜索输入组件：

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

我正在尝试修改边框半径以使其成为圆形，但我在 css 文件中尝试的所有操作都不起作用。

css 文件:

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

}

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

有没有办法修改搜索输入框的边框半径？通常当我直接修改 ant design class 名称时它就起作用了。但在这种情况下它没有。还有其他我想念的方法吗？

Answer 1

您需要在 Input.Search.

中定位 .antd-input class

例如 CSS-in-JS:

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

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

或者您的情况：

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