Media Queries inline styles using radium

• Create Components folder under src folder
• Add MediaQueriesInlineStylesUsingRadium.js file and add below Code

import React from 'react';

import Radium, { StyleRoot } from 'radium';

const MediaQueriesInlineStylesUsingRadium = (  ) => {

    const style = {

        '@media (max-width: 900px)': {

            color:'red'

        },

        '@media (max-width: 500px)': {

            color:'blue'

        }

    };

    return (

        <StyleRoot>

        <div  style={style}>

             <h1>Media Queries Inline Styles Using Radium</h1>

        </div>

        </StyleRoot>

    );

};

export default Radium(MediaQueriesInlineStylesUsingRadium);

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import MediaQueriesInlineStylesUsingRadium from './Components/MediaQueriesInlineStylesUsingRadium'

import Radium, { StyleRoot } from 'radium';

function App() {

  return (

    <div className="App">

      <StyleRoot>

     <MediaQueriesInlineStylesUsingRadium/>

     </StyleRoot>

    </div>

  );

}

export default App;

Output: