CODEWITHSUNDEEP
cssreactjs
Vien Tang
Vien Tang

Reputation: 603

React pseudo selector inline styling

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 each React component. You style your component with that styles file. But then you want to do a hover effect on a button (or whatever).

One way is to have a global CSS file and handle styling pseudo selectors that way. Here, the class 'label-hover' comes from a global CSS file and styles.label comes from the components style file.

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

Another way is to style the components based on certain conditions (that might be triggered by state or whatever). Here, if hovered state is true, use styles.button and styles.buttonHover otherwise just use styles.button.

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

Both approaches feels kind of hacky. If anyone has a better approach, I'd love to know. Thanks!

Upvotes: 51

Views: 106115

Answers (2)

Michael Peyper
Michael Peyper

Reputation: 6944

Update 04/11/2024

This answer still gets the occasional upvote, and I'm so pleased it's been helpful to people over the years.

I have not been in the frontend space for quite some time now so I don't have any new suggestions, but I want to advise you to research what the current trends and best practices are around this now. The original advice and the updated list is quite old now and should not be considered without some due diligence on your part to make sure it's still current.

Good luck, and happy coding!

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 - 👩‍🎤 The Next Generation of CSS-in-JS
  • fela - Universal, Dynamic & High-Performance Styling in JavaScript
  • styled-jss - Styled Components on top of JSS
  • react-jss - JSS integration for React
  • jss - JSS is a CSS authoring tool which uses JavaScript as a host language
  • rockey - Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
  • styled-components - Universal, Dynamic & High-Performance Styling in JavaScript
  • aphrodite - It's inline styles, but they work! Also supports styling via CSS
  • csx - ϟ A CSS-in-JS solution for functional CSS in functional UI components
  • styled-jsx - Full CSS support for JSX without compromises
  • glam - crazy good css in your js
  • glamor - css in your javascript
  • glamorous - React component styling solved with an elegant API, small footprint, and great performance (via glamor)
  • styletron - ⚡️ Universal, high-performance JavaScript styles
  • radium - Set of tools to manage inline styles on React elements.
  • aesthetic - Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
  • j2c - CSS in JS library, tiny yet featureful

(Source)

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);

Upvotes: 73

user1747330
user1747330

Reputation:

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.

Upvotes: -2

Related Questions