Quick Contact


    React CSS

    React CSS is used for styling the application. In this inline styling is done and parallely with that stylesheet.js is created.

    We have stylesheet.js as-:

    		Import React from ‘react’ 
    		Import ‘./myStyles.css’
    		Function Stylesheet(props) {
    		     Let className = props.primary ? ‘primary’: ‘’
    		Return (
    		< div>
    		< h1 classname={‘${className} font-xl’}> StyleSheets < /h1>
    		< /div>
    		}}
    		Export default Stylesheet
    	

    INLINE.JS is coded as-:

    		Import React from ‘react’
    		Const heading – {
    		   fontSize: ‘72px’,
    		   color: ‘blue’
    		}
    		Function Inline() {
    		   Return(
    		   < div>
    		 < h1 className={styles.success}>Success< /h1>
    		< h1 className=”error”>Error< /h1>
    		< h1 style={heading}Inline< /h1>
    		< /div>
    		}}
    		Export default Inline
    	

    Regular Stylesheet approach is as-:

    		.primary {
    		Color: red;
    		}
    		.font-xl {
    		 Font-size: 72px;
    		}
    	

    Moreover you will create css modules in SRC folder as-:

    		.success{
    		Color: blue;
    		}
    	

    There are number of options of styling react component sheet.

    1. CSS Stylesheet
    2. Inline Styling
    3. CSS Modules
    4. CSS in JS Libraries

    Covering CSS in JS library is different series concept so its sufficient for now to learn first three steps in styling.

    1. Using CSS Stylesheets

      In this file first use react snippet to create functional comnponent. Create a adifferent file like “mystyle.css” in which different styling is wriiten so that it can use in different files by using export function.

      First class is created as-:

      Function Stylesheet() {

      Then write classname in < /h1> tag.

      As-:

      react-css
    2. You can also conditionally apply class based on state and props of the component.

      Lets pass the props in stylesheet .

      And in style component file define props as a parameter and within body write under classname as follows. Use classname variable as the value to Classname attribute.

      react-css

      Here value of primary prop is reading which is define in different stylesheet value and if value will be true then it display output according to stylesheet color properties defined there or if false then simply displayed in black color as below-:

      react-css

      So in css file let’s create new class and define in stylesheet file.

      react-css

      And in stylesheet define style class by changing value to classname attribute and specify second class as shown in code that is “font-xl”

      react-css
      And in browser it is shown as-:
      react-css

      There is also library of classname which you can use of.

    3. Using inline Styling

      In react inline function are not specified as a string rather objects are created in this as- heading or fontSize, color. In inline make use of style attribute which is going to be equal to object that is heading.

    4. react-css
      Now in app component file as-:
      react-css
      So all to do is create object and apply in style attribute.
    5. CSS Modules

      So here css modules are available for react version 2 or higher. The file creates for css modules must suffix with “.module.css”.

      Lets create two stylesheets in source folder in which “Appstyles.css” which regular stylesheet and “style.css” is module style sheet.

      First create classes in both the files.

      In app.css write-:

      	       .error {
                   Color: red
      			}
      			And in module stylesheet as-:
      			       .Success {
      			          Color: green
      			}
      	

      And in app.css root file import both the files

    6. react-css

      So in browser you should see both the files.

      react-css

      Now advantages of using css modules are classes are locally scope by default. As write file error heading in inline component. And use inline in root file then files can easily merge through modules as-:

      react-css
      react-css
      Finally using css modules output is-:
      react-css

    Copyright 1999- Ducat Creative, All rights reserved.