How to add pseudo selector inline styling to the styles prop with React?

Sometimes, we want to add pseudo selector inline styling to the styles prop with React.

In this article, we’ll look at how to add pseudo selector inline styling to the styles prop with React.

How to add pseudo selector inline styling to the styles prop with React?

To add pseudo selector inline styling to the styles prop with React, we can use the Radium library.

For instance, we write:

import React from "react";
import Radium from "radium";

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

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

const MyStyledComponent = Radium(MyComponent);

export default function App() {
  return (
    <>
      <MyStyledComponent />
    </>
  );
}

We set the style object we the value of the style prop in MyComponent to add the hover styles to the section element.

Then we call the Radium HOC with MyComponent to create the MyStyledComponent component with the hover styles.

Finally, we use MyStyledComponent in App and we can see that the section element’s content becomes white when we hover over it.

Conclusion

To add pseudo selector inline styling to the styles prop with React, we can use the Radium library.