React Tutorial – Learn React in 5 hours – Part 6

React CSS and Saas
Share

You can give styling with many ways among them here we discuss basic styling  methods. Cover topics in this section as a mention below.

  1. Styling React Using CSS
  2. 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:
Inline Styling

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:
Styling react camel case

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:
Styling javascript object

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.

In your application, import the stylesheet:
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 Stylesheet

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.

Create the CSS module with the .module.css extension, example: my-style.module.css. Create a new file called “my-style.module.css” and insert some CSS code in it:
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:
CSS Module

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 sass

You 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:
Styling using react sass

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.

Share

Leave a Comment

Your email address will not be published.

Share