Styling Component in React

In this tutorial we will lean all about React with CSS and Image and assets in react.

Css play a vital role in frontend development so in react as well we can make Css in many ways like

1.Internal stylesheet

2.External stylesheet

3.Css module

4.Css in Js

1.Internal stylesheet

Style in most often used in React application to add dynamically component style at rendertime..

The style attribute accepts a JS object with camelcase properties rather than a CSS string.This is consistent with the DOM style JS property , is more efficient ,and prevents XSS security holes.

CSS classes are generally better for performance than inline styles.

style are not autoprefixed. vendor prefixes other than ms should begin with capital letter. eg:Webkit Transition has an uppercase "W".

note:in inline css you cannot used pseudoclass like : hover,focus e.t.c

import React from 'react'
const Home = () => {
  const btnStyle = {
    "color": "blue",
    "backgroundColor": "orange"
  }
  // as it is a object so you can the property like
  btnStyle.color = "red"
  return (
    <div>
      <h1>Welcome to react</h1>
      <button style={btnStyle}>Click me</button>
    </div>
  )
}

export default Home

If you want to pass many class in inline you need to use spred operator.

import React from 'react'
const Home = () => {
  const btnStyle = {
    "color": "blue",
    "backgroundColor": "orange"
  }
  const extraStyle = {
    "padding": "10px",
    "borderRadius": "5px",
    "textAlign": "center"
  }
  return (
    <div>
      <h1>Welcome to react</h1>
      <button style={{ ...btnStyle, ...extraStyle, ...{ fontWeight: "normal" } }}>Click me</button>
    </div>
  )
}

export default Home

2.External stylesheet

it occurs globally for all project. here you need to define one css file and add all the styling there, called it according to the requirements in particular file and used the style define in css file.

import React from 'react'
import "../css/Home.css"
const Home = () => {
  let style = true;
  return (
    <div>
      <h1 className={style ? "text" : "text1"}>Learn React</h1>
    </div>
  )
}

export default Home

Note:name conflict may occur like same classnane of different class. To solve this , you can use Inline Style or used CSS Module.

3.Css module

inline style => canot make pseudoclass

external styling => name conflict may occurs

so to solve these all we have css Module.

Css module let you use the same css classname in different files without worrying about naming clashes.

Css file in which all class names and animation names are scoped locally by default. it allows the scoping of css by automatically creating s unique cl;assname of the format.

syntax:

[name].module.css

import React from 'react'
import style from "../css/Home.module.css"
// here style is just a naming convension , using this you can accsss any class define in css file
const Home = () => {
  return (
    <div>
      <h1 className={style.text}>Learn React</h1>
    </div>
  )
}

export default Home

4.Css in JS

"CSS-in-JS" refers to a patterns where CSS is composed using JS instead of defined in Externalfiles. This functionality is not a part of REACT,but provided by third-party libraries.

example: Glamorous,styled component,Radium,Emotion

 

 

Bootstrap In REACT

you can used the Bootstrap by 2 ways

1.By CDN rule

simple copy the CDN in your index.html file and used classes provided by bootstrap in any file.

2.By instll through NPM

npm install bootstrap@4.1.1

Then you can see the bootstrap file in node_modules>>bootstrap>>dist>>css>>bootstrap.css

// index.js
import "../node_modules/bootstrap/dist/css/bootstrap.css"