Реагировать на псевдоселектор встроенного стиля

Как вы думаете, являются ли хорошие способы обработки стилей псевдоселекторов с помощью встроенного стиля React? Каковы выгоды и недостатки?

Скажем, у вас есть файл styles.js для каждого компонента React. Вы создаете свой компонент с помощью этого файла стилей. Но тогда вы хотите сделать эффект зависания на кнопке (или что-то еще).

Один из способов состоит в том, чтобы иметь глобальный файл CSS и обрабатывать псевдоселектора стиля таким образом. Здесь класс "наклейка на ярлык" происходит из глобального файла CSS, а styles.label - из файла стиля компонентов.

<ControlLabel style={styles.label} className='label-hover'>
    Email
</ControlLabel>

Другим способом является стилизация компонентов на основе определенных условий (которые могут быть вызваны состоянием или каким-либо другим). Здесь, если зависающее состояние истинно, используйте styles.button и styles.buttonHover, иначе просто используйте style.button.

<section 
  style={(hovered !== true) ?
     {styles.button} : 
     {...styles.button, ...styles.buttonHover }>
</section>

Оба подхода кажутся хакерскими. Если у кого-то есть лучший подход, я бы с удовольствием узнал. Спасибо!

Ответ 1

Мой совет всем, кто хочет использовать Inact-стрилинг в React, также использовать radium.

Он поддерживает :hover :focus и :active псевдоселекторы с минимальными усилиями с вашей стороны

import Radium from 'radium'

const style = {
  color: '#000000',
  ':hover': {
    color: '#ffffff'
  }
};

const MyComponent = () => {
  return (
    <section style={style}>
    </section>
  );
};

const MyStyledComponent = Radium(MyComponent);

Обновление 04/03/2018

В последнее время я получил несколько откликов, поэтому я чувствую, что должен обновить его, так как я перестал использовать Radium. Я не говорю, что Radium все еще не хорош и хорош для работы с псевдо-селекторами, просто это не единственный вариант.

Со времени выхода Radium появилось большое количество библиотек css-in-js, которые стоит рассмотреть. Мой текущий выбор - эмоции, но я призываю вас попробовать и найти тот, который подходит вам лучше всего.

эмоция - Next Следующее поколение CSS-in-JS
fela - универсальный, динамичный и высокопроизводительный стиль в JavaScript
styled-jss - Стилизованные компоненты поверх JSS
response-jss - интеграция JSS для React
JSS - JSS - это инструмент разработки CSS, который использует JavaScript в качестве основного языка
rockey - Stressless CSS для компонентов, использующих JS. Написать компонентный CSS с функциональными миксинами.
styled-components - универсальный, динамичный и высокопроизводительный стиль в JavaScript
Афродита - это встроенные стили, но они работают! Также поддерживает стилизацию с помощью CSS
csx - решение CSS-in-JS для функционального CSS в функциональных компонентах пользовательского интерфейса
styled-jsx - полная поддержка CSS для JSX без компромиссов
глэм - сумасшедшие хорошие css в твоем JS
Glamour - CSS в вашем JavaScript
гламурный - стиль React компонентов решен с помощью элегантного API, небольшого размера и отличной производительности (благодаря гламуру)
styletron - ⚡️ Универсальные высокопроизводительные стили JavaScript
radium - Набор инструментов для управления встроенными стилями элементов React.
aesthetic - Aesthetic - это мощная библиотека React для стилей компонентов, будь то CSS-in-JS, использующий объекты, импортирующий таблицы стилей или просто ссылающийся на внешние имена классов.
j2c - CSS в библиотеке JS, крошечный, но интересный

(Источник)

Ответ 2

Есть ли причина, по которой вы не моделируете псевдоселекторов со своим классом label-hover? Или я не понимаю ваш вопрос?

.label-hover {
   color: orange;
   opacity: 0.5;
}

.label-hover:hover {
   opacity: 1;
}

Вы не можете стилизовать псевдоселекторов с встроенным стилем (Псевдо-классы CSS с встроенными стилями), и я думаю, что использование javascript для просмотра зависания элемента неоправданно сложный и хакерский способ сделать это.