Изменить цвет фона карты, когда элемент в карте находится в фокусе

Question

Я использую Ant Design, и я новичок в этом.В моем случае, внутри компонента карты много компонентов ввода.Я хотел бы изменить цвет фона карты, когда какой-либо компонент ввода внутри карты фокусируется.

Я хотел бы посмотреть, есть ли простой способ сделать это, или я должен написать функции JavaScript для этого случая.

Я ценю любую помощь по этому делу.Буду признателен за предоставление примера кода.Большое спасибо.

PS Я могу изменить цвет фона карты.Но я не могу найти API на компоненте карты, который обеспечивает такую ​​функцию.

Answer 1

Используйте трюк CSS, как показано ниже

CSS

.highlight:focus-within {
     background: #a1c084;
}

JS

<Card title="Card Name" className="hightlight">
     <Input placeholder="Your Input" />
</Card>

Надеюсь, это поможет

Код Pen: https://codepen.io/shreyans-shrivastav/pen/LawoYE