React Basic

Inline css in react

index.js

import React from 'react';
function App(){
   return <div>
      <h1 style={{ color: "red" }}>Hello</h1>
   </div>
}
export default App;

You should check the value of style is with double curly braces.

Because in React Javascript expressions, variable are written inside curly braces and the inline css is written as an object. That becomes double curly braces.

Another way to set style to react component

index.js

import React from 'react';
const textColor = {
  color: "green"
}
function App(){
   return <div>
      <h1 style={textColor}>Hello</h1>
   </div>
}
export default App;
<h1 style={{ color: "red" }}>Hello</h1>

• replacing the style value object and replace with a varible name that is an object of styling.

Separate CSS file

• create css file
• import css to our component

App.css

h1{
   color: rgb(64, 4, 104)
}

App.jsx

import React from ‘react’;
import ‘./App.css’
function App(){
   return <>
      <h1 >Hello</h1>
   </>
}
export default App;

Styling with className

App.css

.heading {
   text-align: center;
   font-size: 2rem;
   color: salmon;
}

App.jsx

import React from 'react';
import './App.css'
function App(){
   return <div>
      <h1 className="heading">Hello React</h1>
   </div>
}
export default App;