Multiple ways to apply styles to the component in React component

Multiple ways to apply styles to the component in React component

This article shows multiple ways to apply styles to a component. The first way, apply inline styles to react components using style object The second way, using import CSS files in React component third, using css in javascript using styled-component Fourth, SASS CSS preprocessor, and LESCSS, Stylus preprocessor languages

React is a javascript library for UI components. CSS st are applied to style a component. React uses JSX

  • Inline styles

Create a React application

Open a terminal and run the npx create-react-app appname command to create a brand new application from scratch.

It creates a new application with all required files

A:\work>npx create-react-app react-style-components
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support the global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found [here](https://create-react-app.dev/docs/getting-started/):



Now, run the below command to start React application

```bash
npm start run

It starts to react application with http://localhost:3000/

Let’s add a button component to react component

Html button code added to render method of React component.

import React from "react";

class ButtonStyle extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <button type="button">Click</button>
      </div>
    );
  }
}
export default ButtonStyle;

Let’s see Different ways to apply styles to a button

How to add Inline Style to React component?

Inline-styles are added to elements themselves in HTML.

It is an easy and quick way of adding to an element.

React provides a style tag to an element that takes an object wrapped in {{}} An object is a javascript that contains keys and values, keys must be a string and values must enclose in double-quotes for a string

It is always a high priority to choose styles compared with CSS styles in a separate file.

import React from "react";

class ButtonInlineStyle extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <button
          style={{
            fontSize: "1rem",
            fontWeight: 1.5,
            lineHeight: 1.5,
            color: "white",
            borderRadius: "25px",
            backgroundColor: "blue",
            padding: "0 2em",
            outline: "none",
            border: "none",
          }}
          type="button"
        >
          Click
        </button>
      </div>
    );
  }
}
export default ButtonInlineStyle;

It is simple and easy to test the changes, But there are some disadvantages

  • It is a quick way to apply a small project codebase and is not suitable for the larger project.
  • Need complex logic needed to implement hover and pseudo CSS code styles
  • Tightly coupled CSS styles with component logic.
  • It is very difficult to write standard inline CSS attribute, For example, CSS takes border-radius, and React inline styles accepts borderRadius

Output:

It shows a button with applied CSS styles.

If you inspect an button, you can see the html button with inline style attribute

<button
  type="button"
  style="font-size: 1rem; font-weight: 1.5; line-height: 1.5; color: white; border-radius: 25px; background-color: blue; padding: 0px 2em; outline: none; border: none;"
>
  Click
</button>

CSS style file import in React component

It is a standard approach to writing CSS styles in a separate file and importing CSS files in react component

Create a stylesheet file styles.css

.clickButton {
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: white;
  border-radius: 25px;
  background-color: blue;
  padding: 0px 2em;
  outline: none;
  border: none;
}
.clickButton:hover {
  color: white;
  background-color: lightblue;
}

In React component, You can apply styles using className or element or id.

className in react attribute is equal to the class attribute in HTML.

Next, Import styles.css with correct path.

import React from "react";
import "./styles.css";
class ButtonStyle extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <button className="clickButton" type="button">
          Click
        </button>
      </div>
    );
  }
}
export default ButtonStyle;

Generated html output:

<button class="clickButton" type="button">Click</button>

Advantages:

  • Clear separation of styles and component logic

  • Support native CSS styles

  • Supports CSS pseudo and hover, selectors,

  • It gives more power to add the latest preprocessor support

Disadvantages:

  • React naming conventions for naming CSS selectors
  • It is easy with plain CSS files, For sass, less, and stylus preprocessors, a Lot of setups are required to compile these into CSS code.
  • CSS styles are applied to the global scope of a component, Any children in a component hierarchy need proper deep nested CSS hierarchy to apply the local scope of a component.
  • Naming conventions must match CSS names and DOM elements names

How to write css styles in javascript for react component

In this way, You define the CSS styles in the javascript file.

the styled-components library provides an easy way to integrate CSS in javascript for react components. It is an npm library to manage the styles with CSS and ES6 javascript.

First, Install styled-components in react application with the below steps

if you are using the npm package manager, Run the below command

npm install --save styled-components

Type the below command for the yarn package manager

yarn add styled-components

Let’s create a Button using a styled component

Created two buttons Each button is styled with a component using styled-components syntax that wraps CSS styles in the javascript template literal.

import React from "react";
import "./styles.css";
import styled from "styled-components";

class ButtonStyledComponent extends React.Component {
  render() {
    return (
      <div>
        <Button type="button">Click</Button>
        <Button1 className="submitButton" type="button">
          Click
        </Button1>
      </div>
    );
  }
}
export default ButtonStyledComponent;

const Button = styled.button`
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: white;
  border-radius: 25px;
  background-color: blue;
  padding: 0px 2em;
  outline: none;
  border: none;

  &:hover {
    color: white;
    background-color: red;
  }
`;

const Button1 = styled.submitButton`
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: white;
  border-radius: 25px;
  background-color: green;
  padding: 0px 2em;
  outline: none;
  border: none;

  &:hover {
    color: white;
    background-color: yellow;
  }
`;

Advantages:

  • CSS styles are applied to the limited only component and do not conflict with component hierarchy on a page
  • You can separate UI styles and component logic in separate files

Disadvantage:

  • Learn the styled-components syntax and adds code
  • Need to learn how templates literal wrapped CSS styles
  • Extra npm dependency styled-component.

Remaining ways to apply styles with the following preprocessor

  • SASS and SCSS preprocessor
  • LESS CSS
  • Stylus CSS language For this, React application creation should be added to support and compile these languages and output CSS.

You can get full source code🔗 of this article

Conclusion

In a summary, there are multiple ways to add CSS styles to React components with examples.