Conditionally applying inline styles in react js

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

import React, { Component } from "react";

class CSSConditionallyinline extends Component {

constructor() {

super();

this.state = { isRed: true };

}

render() {

const isRed = this.state.isRed;

return (

<div>

Conditionally applying inline styles

<p style={{ color: isRed ? "red" : "blue" }}>Example Text</p>

</div>

);

}

}

export default CSSConditionallyinline;

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import CSSConditionallyinline from "./components/CSSConditionallyinline";

function App() {

return (

<div className="App">

<CSSConditionallyinline />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

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: