ant design：修改Input组件的border-radius

Question

我有以下蚂蚁设计搜索输入组件：

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

我正在尝试修改边框半径以使其具有圆形形状，但是我在 css 文件中尝试的所有内容都不起作用。

css文件：

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

}

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

无论如何要修改搜索输入组件的边框半径？通常当我直接修改 ant 设计类名称时，它会起作用。但在这种情况下它没有。还有另一种我失踪的方式吗？

Answer 1

您需要.antd-input在Input.Search.

例如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;
  }
}