#8 Styling Methods in React

#8 Styling Methods in React

Anita Ihuman 's photo
Anita Ihuman
·

5 min read

The decision of which styling method is needed for styling your components is dependent on your use case, personal preference, and mostly the architectural goal of your project. In this article, we will discuss the various methods of styling components in React, and how to write each.

Styling Methods

There are about eight methods in which you can apply when styling your react component. They are listed below :

  • Inline CSS

    This method is similar to inline styling in HTML, except in React, we use the style attribute which accepts a javascript object in react components. This styling method is camelCase sensitive and restricts any properties which may contain a hyphen.

How it works 

import React from "react";

const btnStyles = {
  color: "black",
  borderColor: "yellow"
  backgroundColor:"yellow"
};

const Button = () => (
  <button style={{
    color: "black",
    backgroundColor:"yellow"
    borderColor: "yellow"
  }}>
    <span style={btnStyles}>Button Name</span>
  </button>
);

  • Normal CSS

    This is the conventional styling technique you are accustomed to. In which we create an external stylesheet either with just CSS or with Sass.

How it works

=> You will create a CSS file named styles.css

=> Import the stylesheet into the component like this:

import React from 'react';
import './styles.css';

const Home=()=> {

    return (
      <div className="container">
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}

  • CSS in JS libraries

    This is styling techniques in which you style your components using JavaScript. The CSS is generated as a style element that is later attached to the Dom. This method allows you to write your styles in a more descriptive way using the react-jss. Then styles are implemented using the className attribute. How it works => Install using this command
    npm install react-jss
    => Write your styles like this:
const styles = createUseStyles({
  container : {
    color : 'yellow',
    fontSize : '23px'
    background: 'black'
  }
})

=> It is implemented this way:

return(
   <div className={styles.conatiner}> 
      <p className={styles.details}>Hello Friends</p>
 </div>
  )

  • CSS Modules

    You can also use the CSS module when styling your components. CSS modules are convenient for styling components placed in separate files. When they are imported in a component, the class names and animation names are scoped locally by default. In this styling method, the CSS file is named following this format home.module.css. You can also choose to make your CSS module use Sass too for improved styling. The CSS within a module is only functional for the component that imports it. This is to avoid name conflicts.

How it works

=> Create a CSS file using this naming format:

home.module.css

=> Import the CSS module inside the component 

import styles from './home.module.css

=> Write your class names like this

 <div className={style.conatiner}> 
      <p className={style.details}>Hello Friends</p>
 </div>

  • Sass & SCSS

This is a powerful and table CSS extension language, it is a preprocessor scripting language interpreted into CSS. Sass files are executed on the server and sends CSS to the browser. Sass permits you to use things like variables, nested rules, inline imports and a lot more. Learn more about Sass here.

How it works

=> Import Sass into your project using the command below:

npm install -g sass

=> Create a stylesheet name styles.scss and write your styles like this:

/* Define standard variables and values */
$btncolor: yellow;
$textcolor: black;
$fontsize: 20px;

/* Use the variables  for each element.*/
button {
  background-color: $btncolor;
  color: $textcolor;
  font-size: $fontsize;
}

=> Import the stylesheet into the component like this:

import './styles.scss';

const Home=()=> {
      return (
      <div>
         <p>Welcom Friends</p>
          <button>Go to Cart</button>
      </div>
    );  
}

  • Less

    The Learner Style Sheet is an Open-Source CSS preprocessor language that is compiled into CSS and runs on the client-side or server-side. It is similar to Sass and SCSS. Less allows you to nest rule sets inside other rule sets, as a way to show hierarchy. This is one of the cool features of the Less CSS.Check herer more Information on Less.

How it Works

# header {
  # nav {
    ul {
      li {
        a {}
      }
    }
  }
}

  • Stylable

    This is a CSS preprocessor just like Sass and Less that is inspired by Typescript. Stylable, just like the CSS modules enables you to write reusable and high performing components. This method of styling allows you to scope styles to components to avoid clas with other styles in your application. Click here or more information on Stylable CSS.

How it Works =>

  • Styled Components

    This is a library for React and React Native that allows us to style the CSS of a component under a variable created in javascript. Styled Components allows you to create component level CSS styles as custom reusable components that are easy to maintain. Find out more on Styled Components here

How to Start

=> Install the Styled component using this command:

yarn add styled-components

=> Create a file in either .js, .tsx or .ts format and put in this code snippet

import styled from "styled-components";

const StyledButton = styled.button`
  background-color: yellow;
  font-size: 32px;
  color: black;
`;

const Home =()=> {

  return(
       <StyledButton> Go to Cart </StyledButton>
    );
}

Resources

Reactcreate-react-appstyled-componentsCSS