Geek Answers Handbook

Respond to an inline style pseudo selector

What do you think are good ways to handle pseudo selector styles using the React inline style? What are the advantages and disadvantages?

Say you have a styles.js file for each React component. You create your component using this stylesheet. But then you want to make the hover effect on the button (or something else).

One way is to have a global CSS file and handle the style pseudo-selectors this way. Here the label sticker class comes from the global CSS file, and styles.label from the component style file.

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

Another way is to style the components based on certain conditions (which may be caused by a state or some other). Here, if the hover state is true, use styles.button and styles.buttonHover, otherwise just use style.button.

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

Both approaches seem hacky. If anyone has a better approach, I would love to know. Thanks!

+13
css reactjs
source share
2 answers

My advice to anyone who wants to use Inact-stripping in React is to also use radium .

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 03/03/2018

I have received some feedback lately, so I feel like I have to update it since I stopped using Radium. I'm not saying that Radium is still not good and good for working with pseudo-selectors, it's just not the only option.

Since the release of Radium, a large number of css-in-js libraries have appeared that are worth considering. My current choice is emotions , but I urge you to try and find the one that suits you best.

  • Emotion - Next Next Generation CSS-in-JS
  • fela - versatile, dynamic and high-performance style in JavaScript
  • styled-jss - Stylized components on top of JSS
  • response-jss - JSS integration for React
  • JSS - JSS is a CSS development tool that uses JavaScript as its primary language
  • rockey - Stressless CSS for components using JS. Write component CSS with functional mixins.
  • styled-components - versatile, dynamic and high-performance style in JavaScript
  • Aphrodite - these are built-in styles, but they work! Also supports CSS styling.
  • csx - CSS-in-JS solution for functional CSS in functional components of the user interface
  • styled-jsx - full CSS support for JSX without compromise
  • glam - crazy good css in your js
  • Glamor - CSS in your JavaScript
  • glamorous - the style of the React components is resolved using an elegant API, small size and excellent performance (thanks to glamor)
  • styletron - ⚡️ Universal high-performance JavaScript styles
  • radium - A set of tools for managing built-in styles of React elements.
  • aesthetic - Aesthetic is a powerful React library for component styles, whether it's CSS-in-JS, using objects, importing stylesheets, or simply referencing external class names.
  • j2c - CSS in the JS library, tiny but interesting

( Source )

+18
source share

Is there a reason why you are not modeling pseudo selectors with your label-hover class? Or I do not understand your question?

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

You cannot stylize pseudo selectors with inline style ( CSS pseudo-classes with inline styles ), and I think using javascript to view an element's hang is an unreasonably complex and hacky way to do this.

0
source share

More articles:


All Articles