как сделать условную тему с реквизитом и динамичной темой реакции?

#javascript #reactjs #typescript #styled-components #emotion

Вопрос:

Мне нужно установить границу при наведении моего флажка, но когда он установлен, эта граница при наведении не существует. У меня есть файл с токенами, как я могу динамически проходить через них эту границу?

Я бы хотел, чтобы это было так, с этими границами.Ширина границ, которые ищутся в моем файле

но это дает ошибку, я использую стилизованные компоненты

 amp;:hover {
    border: ${(props) => (props.checked ? 'none' : '${borders.borderWidthThin}')};
    cursor: pointer;
  }
 

Ответ №1:

Я могу сделать это без использования функции стрелки реквизита, как так:

 amp;:checked:hover {
    border-color: red;
    cursor: pointer;
  }
 

Он будет отображаться только в том случае, если флажок установлен и наведен. Но если вы хотите использовать функцию поддержки, вы можете сделать это:

 amp;:checked:hover {
border: ${props => props.checked ? 'red' : `${borders.borderWidthThin}`};
cursor: pointer;
 

}