蚂蚁设计：修改输入组件的边界半径

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