Как индивидуально оформить два компонента ant.design?

Question

Я пытаюсь стилизовать два разных Dropdown компонента из ant.design .

Для одного компонента Dropdown я обычно создаю файл css, нахожу конкретный className, редактирую компонент, используя css, а затем импортирую файл css.Однако всякий раз, когда я делаю это, все компоненты Dropdown, которые я использую в веб-приложении, модифицируются одним и тем же файлом css, даже если я не импортирую файл css в определенный файл.

В этом случае я хочу по-разному стилизовать два компонента Dropdown.Как я могу это сделать?

Любая помощь приветствуется;заранее спасибо :)

Answer 1

Я обычно просто использую styleled-компоненты и затем оборачиваю компонент.Я использую ответную часть, хотя.

import styled from 'styled-components';

<LoginForm onSubmit={this.handleSubmit}>
</LoginForm>

const LoginForm = styled(Form)`
  max-width: 300px;
  align-self: start;
  justify-self: center;
`;