Лучший способ изменить ширину gridTemplateColumns при наведении курсора в React JS

Question

CSS Grid + React JS Допустим, у меня есть очень простой c заголовок и боковая панель. И при наведении на боковую панель я хочу, чтобы ширина боковой панели выросла до 300 пикселей. Как я могу подойти к этому?

Реакция

<div className="app">
    <div className="header"></div>
    <div className="sidebar"></div>
</div>

CSS

.app {
  display: grid;
  grid-template-areas:
    "menu header";
  grid-template-columns: 100px 1fr;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: menu;
}

Answer 1

Вы можете использовать реагирующие атрибуты onMouseEnter и onMouseLeave

, поэтому это будет примерно так:

<div className="sidebar" 
  onMouseEnter={() => Make Width 300px}
  onMouseLeave={() => reset width}>
</div>