Adi Dotnet: css

Showing posts with label css. Show all posts

1 April 2020

Complex Conditionally applying CSS classes in react js

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

import React, { Component } from "react";

import "./CSScomplexconditions.css";

class CSScomplexconditions extends Component {

  getClass(someInput) {

    switch (someInput) {

      case "1": {

        return "class1";

      }

      case "2": {

        return "class2";

      }

      case "3": {

        return "class3";

      }

    }

  }

  render() {

    return (

      <div>

        complex Conditionally applying CSS classes

        <p className={this.getClass("2")}>Example Text</p>

      </div>

    );

  }

}

export default CSScomplexconditions;

Add CSScomplexconditions.css file and add below Code

.class1 {

  background-color: red;

}

.class2 {

  background-color: blue;

}

.class3 {

  background-color: orangered;

}

Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import CSScomplexconditions from "./components/CSScomplexconditions";

function App() {

  return (

    <div className="App">

      <CSScomplexconditions />

    </div>

  );

}

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

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

Output:

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:

22 February 2020

Setting CSS Class Names Dynamically in React

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

import React, { Component } from 'react';

import './SettingClassNamesDynamically.css';

class SettingClassNamesDynamically extends Component {

    state={

        myCount:3

      }

  render () {

const classes=[];

if(this.state.myCount===1)

{

    classes.push('red');

}

else

if(this.state.myCount===2)

{

    classes.push('red');

    classes.push('bold');

}

else

if(this.state.myCount===3)

{

    classes.push('red');

    classes.push('bold');

    classes.push('backColor');

}

    return (

        <div>

          <h1>Setting Class Names Dynamically</h1>

         <p className={classes.join(' ')}>Here is my test data, Based on count style will change</p>

        </div>

    );

  }

}

export default SettingClassNamesDynamically;

Add SettingClassNamesDynamically.css file and add below Code

.red {

    color:red;

  }

.bold {

    font-weight:bold;

 }

 .backColor{

    background-color:green;

 }

Open App.js file and update code as below\

import React from 'react';

import './App.css';

import SettingClassNamesDynamically from './Components/SettingClassNamesDynamically'

function App() {

  return (

    <div className="App">

     <SettingClassNamesDynamically/>

    </div>

  );

}

export default App;

Output:

If myCount=1

If myCount=2

If myCount=3

Styles Dynamically Example in React

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

import React, { Component } from 'react';

class StylesDynamically extends Component {

  state = {

    showDiv: false

  }

  toggleDivHandler = () => {

    const doesShow = this.state.showDiv;

    this.setState( { showDiv: !doesShow } );

  }

  render () {

    const style = {

      backgroundColor: 'green',

      color: 'white',

      font: 'inherit',

      border: '1px solid blue',

      padding: '8px',

      cursor: 'pointer',

      ':hover': {

        backgroundColor: 'lightgreen',

        color: 'black'

      }

    };

    let divData = null;

    if ( this.state.showDiv ) {

      divData = (

        <div>

         My Data

        </div>

      );

      style.backgroundColor = 'red';

      style[':hover'] = {

        backgroundColor: 'salmon',

        color: 'black'

      };

    }

    return (

        <div className="App">

          <h1>Styles Dynamically</h1>

          <button

            style={style}

            onClick={this.toggleDivHandler}>Toggle Div</button>

          {divData}

        </div>

    );

  }

}

export default StylesDynamically;

Open App.js file and update code as below

import React from 'react';

import './App.css';

import StylesDynamically from './Components/StylesDynamically'

function App() {

  return (

    <div className="App">

     <StylesDynamically/>

    </div>

  );

}

export default App;

Output:

11 January 2020

Conditionally applying CSS classes in React

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

import React, { Component } from "react";

import "./CSSclassesConditionallyApply.css";

class CSSclassesConditionallyApply extends Component {

  constructor() {

    super();

    this.state = { isRed: true };

  }

  render() {

    const isRed = this.state.isRed;

    return (

      <div>

        Conditionally applying CSS classes

        <p className={isRed ? "class1" : "class2"}>Example Text</p>

      </div>

    );

  }

}

export default CSSclassesConditionallyApply;

Add CSSclassesConditionallyApply.css file and add below Code

.class1 {

  background-color: red;

}

.class2 {

  background-color: blue;

}

Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSclassesConditionallyApply from "./component/CSSclassesConditionallyApply";

import "./styles.css";

function App() {

  return (

    <div className="App">

      <CSSclassesConditionallyApply />

    </div>

  );

}

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

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

Output:

CSS Styling with JavaScript Object in React

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

import React, { Component } from "react";

class CSSJavaScriptObject extends Component {

  render() {

    const mystyle = {

      color: "white",

      backgroundColor: "DodgerBlue",

      padding: "10px",

      fontFamily: "Arial"

    };

    return (

      <div>

        CSS with JavaScript Object

        <h1 style={mystyle}>Style!</h1>

      </div>

    );

  }

}

export default CSSJavaScriptObject;

Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSJavaScriptObject from "./component/CSSJavaScriptObject";

import "./styles.css";

function App() {

  return (

    <div className="App">

      <CSSJavaScriptObject />

    </div>

  );

}

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

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

Output:

CSS External Styling in React

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

import React, { Component } from "react";

import "./CSSExternalCss.css";

class CSSExternalCss extends Component {

  render() {

    return (

      <div>

        CSS external Styling<br />

        Styling React components with CSS stylesheets

        <div className="mycss">Style!</div>

        <h5>Style!</h5>

      </div>

    );

  }

}

export default CSSExternalCss;

Add CSSExternalCss.css file and add below Code

h5 {

  background-color: rebeccapurple;

  height: 50px;

  font-size: 20px;

}

.mycss {

  background-color: red;

  height: 30px;

  font-size: 30px;

}

Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSExternalCss from "./component/CSSExternalCss";

import "./styles.css";

function App() {

  return (

    <div className="App">

      <CSSExternalCss />

    </div>

  );

}

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

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

Output:

CSS Inline Styling in React

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

import React, { Component } from "react";

class CSSInlineStyling extends Component {

  render() {

    return (

      <div>

        CSS Inline Styling

        <h1 style={{ color: "red", fontSize: "15px", textAlign: "center" }}>

          Style!

        </h1>

        <h1 style={{ backgroundColor: "lightblue" }}>Style!</h1>

      </div>

    );

  }

}

export default CSSInlineStyling;

Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSInlineStyling from "./component/CSSInlineStyling";

import "./styles.css";

function App() {

  return (

    <div className="App">

      <CSSInlineStyling />

    </div>

  );

}

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

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