React JS Styles - School4Tech

There are many ways to style and format React with CSS, few of them are:

Inline styling : it is written in same line with DOM element style property.
CSS stylesheets : it is extracted in separate .css file like App.css in below example and imported.

Example code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css'


//App function component 
function App() {
  return (
    <>
      <h1 style={{ color: "red" }}> hello world</h1> {/* in line style */}
      <h2>style from App.css</h2> {/* css stylesheet */}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));   //creating a root React component in your application

root.render(<App />)                                                 // rendering React components into a DOM node.

import React from 'react';

import ReactDOM from 'react-dom/client';

import './App.css'

//App function component

function App() {

return (

<h1 style={{ color: "red" }}> hello world</h1> {/* in line style */}

<h2>style from App.css</h2> {/* css stylesheet */}

</>

);

}

const root = ReactDOM.createRoot(document.getElementById("root")); //creating a root React component in your application

root.render(<App />) // rendering React components into a DOM node.

App.css

h2 {
color: blue;
}

h2 {

color: blue;

}

Output:

Leave a Comment Cancel Reply