React: React CSS

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

   

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.

2. 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.



Now in app component file as-:



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

3. 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



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