So now that you learned how to dynamically set styles and class name, Let’s go back to the limitations of inline styles learn about.
Most important for us right now the fact that we can’t assign a :hover style of our button.
:hover which in CSS you simply create with :hover and its is a pseudo selector which means it’s a selector based on some other selector indicate by that colon.
But we can’t assign this ain our current application there we got our style javascript object where we assign or create some styles for the button.
So we could fix this of course by styling button in CSS file but I already mention that this style will not be scoped to this component only and all the buttons and our application would get the styling.
YES! we could work around this with some unique CSS ID’s or classes but having the possibility of using the inline styles can also be pretty cool because as we already do.
You can edit them in your code because everything is javascript.
So it could be nice if we use pseudo-selectors and media queries in our normal javascript inline styles.
For that, we need to install a new third party package.

Adding and Using Radium In React

lets now install a new pacakge named as Radium in our application

npm install --save radium

After Install the first thing will do is import in App.js files. You can import in any *.js files.

...
import Radium from 'radium';
...

Now whith that imported package you can go to the line where you export your app and there you can call Radium(App) as a function and wrap your app with it.

...
export default Radium(App);

Now it is called a higher order component something we will all train our course project later.
It might look super fancy but it, in the end, it’s just a component wrapping your component kind of injecting some extra functionality.
In this case, some extra syntax which will parse your styles and understand some extra features you can now start using.
You can use Radium() on both class based component and function based components
Now lets use some new features on our styles because Radium is all about styles. the const style which will get assigned to the button at the end.

...
const style = {
	backgroundColor: 'green',
	font: 'inherit',
	border: '1px solid black',
	padding: '8px',
	borderRadius: '4px',
	color: 'white',
	boxShadow: '0 2px 3px #ccc',
	':hover': {          // Any sudo selectors you can use
		backgroundColor: 'darkgreen',
		cursor: 'pointer',
	},
};
...
if (this.state.showPersons) {
	...
	style.backgroundColor = 'red';
	style[':hover'] = { backgroundColor: 'salmon', cursor: 'pointer' };
}

Run your application and see the changes that Radium works!

React introduction
React Component