
Quick Contact
React Tutorial
- React JS Introduction
- How to install react?
- React Features
- React vs React Native
- React JS VUE Application
- State V/S Props
- React Props
- REACT STATE
- React JSX?
- Conditional Rendering
- React Constructor
- Props Validation
- React Component API
- React Forms
- React Event
- Flux v/s MVC
- React Flux Concept
- React Fragment
- React Lists and Keys
- Error Boundaries
- React Portals
- React Animation
- React Redux
- React CSS
- React Refs
- React Router
Questions & Answers
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.
- CSS Stylesheet
- Inline Styling
- CSS Modules
- 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.
-
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-:
-
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.
-
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
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.

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-:

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

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

And in browser it is shown as-:

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

Now in app component file as-:

So all to do is create object and apply in style attribute.

So in browser you should see both the files.

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-:


Finally using css modules output is-:

Apply now for Advanced React Js Course