31 – Radium For Media Queries In React

In the last lesson, we added Radium and started using it into our button and added a pseudo selector i.e. the :hover pseudo-selector. that’s, of course, nice but we can also use radium to use media queries.
Now although in the person Component there we have a Person class in src/Persons/Persons.css we could of course easily add a media query. But I want to show you can do that with Radium package that we installed in our application, there might be some situation where you have to change CSS dynamically.

Radium For Media Queries In React

First we will import the Radium package into our component and export with its method Radium().

...
import Radium from 'radium';
...
const person = props => {
  // component JSX code
}
export default Radium(person);

Adding Media Query In React Component

After that will add a new style const style = { } in Person.js.
Now again we will use a special selector which will look really strange but which works thanks to the Radium

...
import Radium from 'radium';
...
const person = props => {
  const style = {
      '@media (min-width: 500px)': {    // still it's a javascript property name.
        ...
      }
  }
  ...
}
export default Radium(person);

@media (min-width: 500px) : Since it’s a string it is valid and radium will parse it and of course understand it because it’s a media query and among pseudo selectors it is something radium understands.

Adding Styles in Media Query

Now inside our media query object we could simply add some properties to style our component.

import React from 'react';
import Radium from 'radium';
import './Person.css';
const person = props => {
	const style = {
		'@media (min-width: 500px)': {
			width: '450px',
		},
	};
	return (
		<div className="Person" style={style}>
		...
		</div>
	);
};
export default Radium(person);

as we can see we have a className added in our JSX code, But I also have my style which will override my class setting by default CSS rules not because of Radium.
Now if we run the application and toggle the button you will see an error i.e.

We need to wrap our application in a style root component. This is a component made available by Radium and while wrapping the export wth radium is enought or is pseudo selectors for basically transforming select ot select media qieries or else animations with keyFrames.

Wrapping Application in Radium Component

We need to wrap the entire application in a special component provided by radium.

import Radium, {StyleRoot} from 'radium';

We can simply import styleRoot from radium , we are importing the default export of that file i.e. Radium and then we import a named export styleRoot.
After that we can simply wrap our whole application with that. So what we can do is we can smply go in return statement and simply wrap <StyleRoot>

...
import Radium, {StyleRoot} from 'radium';
...
class App extends Component {
  ...
  return (
		<StyleRoot>
			<div className="App">
				...
			</div>
		</StyleRoot>
	);
}
...

Now If you save the file and run the application you will se it will work fine without any errors and you can see the the media query is been applied by resizing your browser window.

tou
React introduction
React Component