React pseudo selector inline styling

Question

What do you think are good ways to handle styling pseudo selectors with React inline styling? What are the gains and drawbacks?

Say you have a styles.js file for eac

Answer 1

My advice to anyone wanting to do inline styling with React is to use Radium as well.

It supports :hover, :focus and :active pseudo-selectors with minimal effort on your part

import Radium from 'radium'

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

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

const MyStyledComponent = Radium(MyComponent);

---

Update 04/03/2018

This has been getting a few upvotes lately so I feel like I should update it as I've stopped using Radium. I'm not saying Radium isn't still good and great for doing psuedo selectors, just that it's not the only option.

There has been a large number of css-in-js libraries since Radium came out which are worth considering. My current pick of the bunch is emotion, but I encourage you to try a few out and find the one that fits you best.

• emotion -

Answer 2

Is there a reason you're not styling the pseudo selectors with your label-hover class like this? Or am I misunderstanding your question?

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

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

You can't style pseudo selectors with inline styling (CSS Pseudo-classes with inline styles), and I think using javascript to see if the element is hovered is an unnecessarily complicated and hackish way of doing it.