You can give styling with many ways among them here we discuss basic styling methods. Cover topics in this section as a mention below.
- Styling React Using CSS
- Styling React Using Sass
1. Styling React Using CSS
The following tutorial will look at three common ways to style React with CSS:
- Inline styling
- CSS stylesheets
- CSS Modules
Inline Styling
The value of the inline style attribute must be a JavaScript object:
Example: Insert an object with the styling information: const Header = () => { return ( <> <h1 style={{color: "orange"}}>Hello Style!</h1> <p>Add a learner style!</p> </> ); }Output:
Note: Expressions in JSX are written inside curly braces, and JavaScript objects are also written inside curly braces, so in the example above, the styling is written inside two sets of curly braces.{{}}
camelCased Property Names
For properties with hyphen separators, like background-color, the CSS inline must use camel case syntax.
Example: Use backgroundColor instead of background-color: const Header = () => { return ( <> <h1 style={{backgroundColor: "lightpink"}}>Hello Style!</h1> <p>Add a learner style!</p> </> ); }Output:
JavaScript Object
An object can also contain styling information, and its style attribute references it:
Example: Create a style object named myStyle: const Header = () => { const myStyle = { color: "red", backgroundColor: "white", padding: "12px", fontFamily: "Sans-Serif" }; return ( <> <h1 style={myStyle}>Hello Style!</h1> <p>Add a little learning style!</p> </> ); }Output:
CSS Stylesheet
Simply save the CSS styling as a separate file with the .css extension, then import it in your application.App.css: Create a new file called "App.css" and insert some CSS code in it: body { background-color: #282c34; color: red; padding: 40px; font-family: Sans-Serif; text-align: left; }
Note: You can name the file whatever you like, just remember the correct extension.
index.js: import React from 'react'; import ReactDOM from 'react-dom'; import './App.css'; const Header = () => { return ( <> <h1>Hello Style!</h1> <p>Add a little learning style!.</p> </> ); } ReactDOM.render(<Header />, document.getElementById('root'));Output:
CSS Modules
You can also add styles to your application using CSS Modules.
CSS Modules are useful for components that are placed in separate files.
A module’s CSS is available only to the component that imported it, so you don’t have to worry about name conflicts.
my-style.module.css: .bigblue { color: red; padding: 40px; font-family: Sans-Serif; text-align: left; }Add the stylesheet to your component:
Bike.js: import styles from './my-style.module.css'; const Bike = () => { return <h1 className={styles.bigblue}>Hello Bike!</h1>; } export default Bike;In your application, import the component:
index.js: import ReactDOM from 'react-dom'; import Bike from './Bike.js'; ReactDOM.render(<Bike />, document.getElementById('root'));Output:
2. Styling React Using Sass
What is Sass?
Sass is a CSS pre-processor.
The server executes CSS files and sends them to the browser.
Can I use Sass?
By using create-react-app, your React projects can easily include Sass.
Run the following command in your terminal to install Sass:
>npm i sassYou are now ready to include Sass files in your project!
Create a Sass file
You create Sass files the same way you create CSS files, but Sass files have an extension of .scss
A Sass file can contain variables and other Sass functions:
my-sass.scss: Create a variable to define the color of the text: $myColor: yellow; h1 { color: $myColor; }You can import the Sass file in the same way you imported a CSS file:
index.js: import React from 'react'; import ReactDOM from 'react-dom'; import './my-sass.scss'; const Header = () => { return ( <> <h1>Hello Style!</h1> <p>Add a little learning style!.</p> </> ); } ReactDOM.render(<Header />, document.getElementById('root'));Output:
Rather than these two styling, their are many other style react components available like bootstrap, material UI, Tailwind CSS, Chakra, styled components and ant design.
