Part 15 : Pseudo class selector in React

# 5 minutes of reading

As I already shown you in previous article how to use inline CSS and external CSS from separate file.
Pseudo class selector work fine with in react when you reference CSS from external file but not work with inline CSS style. In react Inline CSS is JavaScript(JSX code) and you cannot apply pseudo class selector directly but with the help radium library. Source code available here

Pseudo class selector:
div:hover {
background-color: blue;
}
In above CSS class example, hover is pseudo class selector. Pseudo class selector written after class name separated by colon character.
Above CSS changes color of div element when mouse hover to the div.
Let’s see how to use Pseudo selector class can be used in inline CSS with react.
Install third party package radium, open VS code and click on terminal from menu bar of VS code. It will open below window and type highlighted command shown.

Once radium installed successfully, change below highlighted code in App.js file.

In App.js file need to import radium package/library highlighted at line number 4 and before exporting App component it should be wrap in radium highlighted at line number 78. Radium is providing libraries from radium package as extra functionality to App component on top.
Change below piece of code from line number 34 to 38 and line number 64 to 67. When Employee list not present on screen and mouse house on button, the color of button turn to purple on over. If employees list is present on screen and user hover on button, color of button turn to yellow.

Let’s see in action on browser window.