Lesson 8 - Styling In React

8.1 - Inline Styles

Styling is the key to creating a visually appealing user interface that improves user experience. Like the normal website, React uses CSS too for styling applications.

React introduces multiple ways to integrate CSS into your React project. Let's explore them with an example:

Inline styles: Inline styling allows you to apply styles directly to the component. This is helpful when you need component-specific styling. To apply the Inline style you have to enclose the styling properties inside the double curly braces {{}} and use camelCase for the styling property.

Inline styles allow you to provide component+specific styles. However, complexity may arise when multiple styling attributes come into play.

For example, Use backgroundColor instead of background-color.

Have a look at the following example,

import React  from 'react';

function App() {
 return (
 <>
 <h1 style={{color: "blue"}}>This is a Heading</h1>
 </>
 );
}