Дизайн муравья: изменить радиус границы для входного компонента

У меня есть следующий компонент ввода поиска 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;
}

есть ли способ изменить радиус границы компонента ввода поиска? Обычно, когда я изменяю имя класса дизайна муравья напрямую, оно работает. но в данном случае это не так. Есть ли другой способ, по которому я упускаю?


reactjs antd react-css-modules
person john    schedule 04.08.2019    source источник
comment
Привет, я застрял с той же проблемой, есть идеи, как это сделать для текстового поля ввода?   -  person Mahesh Kumaran    schedule 14.07.2020

Ответы (1)


arrow_upward
6
arrow_downward

Вам нужно настроить таргетинг на класс .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;
  }
}

Изменить Q-57343486-StyleInputSearch

person Dennis Vash    schedule 04.08.2019