STYLING REACT COMPONENTS
Inline Style In React
Styling Components – CSS Stylesheets
External Style
Styling React Components –
CSS Modules

Styling Components – Inline Style

There are many ways to style React with CSS.

  1. Inline Style
  2. CSS Stylesheets – External Style
  3. CSS Module
  4. CSS In JS

Inline Styling

  • To style an element with the inline style attribute, the value must be a JavaScript object.
  • In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example above is written inside two sets of curly braces {{ }}.
  • In Inline Style we cannot use pseudo classes, e-g- :hover, :active, :visited etc

React camelCased Property Names

  • In React JS, Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax.
  • Use backgroundColor instead of background-color.

JavaScript Object

In React JS, You can also create an object with styling information, and refer to it in the style attribute.

Styling Components In React

In React JS, We can change style of component’s element based on certain condition by using state.

Source Code – Inline Styling

StyleComponent.js Code

import React, { Component } from 'react'

export default class StyleComponent extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         active:false
      }
    }
    
    changeState = () => {
        this.setState({
            active:true
        });
    }

  render() {
    // let obj = {
    //     color:"blue",
    //     backgroundColor:"orange",
    //     fontSize:"50px"
    // }
    // let obj1 = {
    //     color:"blue",
    //     backgroundColor:"orange"
    // }
    // let obj2 = {
    //     fontSize:"50px",
    //     fontFamily:"cooper"
    // }
    let obj = {
        color:"blue",
        backgroundColor:"orange",
        fontSize:"50px"
    }
    if(this.state.active)
    {
        obj.backgroundColor = "yellow";
        obj.color="purple"
    }
    return (
      <div>
       <button style={obj} onClick={this.changeState}>Click</button>
        {/* <h1 style={{color:"red"}}>Learning Never Ends</h1> */}
        {/* <h1 style={{color:"red",backgroundColor:"yellow"}}>Learning Never Ends</h1> */}
        {/* <h1 style={obj}>Learning Never Ends</h1> */}
        {/* <h1 style={{...obj1, ...obj2}}>Learning Never Ends</h1> */}

      </div>
    )
  }
}

Index.js Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import Person from './Person';
import reportWebVitals from './reportWebVitals';
import ParentClass from './ParentClass';
import ParentComponent from './ParentComponent';
import NewComponent from './NewComponent';
import Students from './Students';
import StyleComponent from './StyleComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div className='App'>
    <StyleComponent/>
    </div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Styling Components – CSS Stylesheets External Style

  • You can write your CSS styling in a separate file, just save the file with the .css file extension, and import it in your application.
  • You can call the file where ever you like, just remember the correct file extension.
  • Must write className attribute instead of class attribute.
  • Write className in camelCase.
  • Class is a reserved keyword in JavaScript.
  • It is a convention that name of the external CSS file same as the name of the component with ‘.css’ extension.
  • We can render CSS based on some condition.
  • It is normal that our CSS depends on Props Or State.

Source Code – CSS Stylesheet – External Style

CSSstylesheet.js Code

import React, { Component } from 'react'
import './CSSstylesheet.css'

export default class CSSstylesheet extends Component {
  render() {
    let x = this.props.check ? 'myFont' : 'myFont2';
    return (
      <div>
        <h1 className={`${x} myFont3`}>My Name Is Mohammad Adil</h1>
      </div>
    )
  }

CSSstylesheet.css Code

.myFont{
    color:red;
}

.myFont2{
    background-color: yellow;
}

.myFont3{
    font-family: 'comic sans ms';
}

App.js Code

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import Component2 from './Component2';
import CSSstylesheet from './CSSstylesheet';
import Stylesheet1 from './Stylesheet1';
import Stylesheet2 from './Stylesheet2';

function App() {
    return (
        <div>
            <CSSstylesheet/>
        </div>
    )
}

export default App

Index.js Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import Person from './Person';
import reportWebVitals from './reportWebVitals';
import ParentClass from './ParentClass';
import ParentComponent from './ParentComponent';
import NewComponent from './NewComponent';
import Students from './Students';
import StyleComponent from './StyleComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div className='App'>
    <App/>
    </div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Styling React Components – CSS Modules

CSS Modules In React

  • Another way of adding styles to your application is to use CSS Modules.
  • CSS Modules are convenient for components that are placed in separate files.
  • The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.
  • CSS Modules are locally scoped.
  • CSS Stylesheets (External Style) are globally scoped.
  • CSS Module converted in different format in browser.
    • Filename_classname_hashcode
  • CSS Modules feature is available with react-scripts@2.0.0 and higher.

Source Code – CSS Modules

Stylesheet1.js code

import React, { Component } from 'react'
// import './Stylesheet1.css'
import Style1 from './Stylesheet1.module.css'
import Style2 from './Stylesheet2.module.css'


export default class Stylesheet1 extends Component {
  render() {
    return (
      <div>
        <h1 className={Style1.heading1}>Welcome To Learning Never Ends</h1>
        <h1 className={Style2.heading1}>Welcome To Learning Never Ends</h1>

      </div>
    )
  }
}

Stylesheet2.js code

import React, { Component } from 'react'
// import './Stylesheet2.css'
import Style from './Stylesheet2.module.css'

export default class Stylesheet2 extends Component {
  render() {
    return (
      <div>
        <h1 className={Style.heading1}>My Name Is Mohammad Adil</h1>
      </div>
    )
  }
}

Styleheet1.module.css

.heading1{
    background-color:yellow;
}

Styleheet2.module.css

.heading1{
    background-color:orange;
}

App.js

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import Component2 from './Component2';
import CSSstylesheet from './CSSstylesheet';
import Stylesheet1 from './Stylesheet1';
import Stylesheet2 from './Stylesheet2';

function App() {
    return (
        <div>
            <Stylesheet1/>
            <Stylesheet2/>
        </div>
    )
}

export default App

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import Person from './Person';
import reportWebVitals from './reportWebVitals';
import ParentClass from './ParentClass';
import ParentComponent from './ParentComponent';
import NewComponent from './NewComponent';
import Students from './Students';
import StyleComponent from './StyleComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div className='App'>
    <App/>
    </div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/e5pfqh2bvzg3xwx/Styling+Components+React+JS.rar/file

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *