Introduction

Welcome to my first article. This is me trying a different approach to learning by writing and researching the things I have learned. I hope my simplified version helps you better understand whatever you are learning. My current focus is on the popular JavaScript library, React. And my following articles will be on this topic. Let's get started!

There are different approaches to writing CSS in React for our various projects. This article will cover the FIVE major approaches, which will allow you to create any style structure you want for your code. But before then, the basics:

CSS (Cascading Style Sheets) changes the appearance and structure of HTML documents, such as design, colors, font styles, ananimations, and other visual elements. CSS allows developers to create sophisticated designs and layouts that adapt to different screen sizes and devices.

React is a JavaScript library that gives developers a modern, dynamic approach to creating web user interfaces. It enables developers to create components that can be used repeatedly in different sections of an application.

I don't want to go too much into React and CSS; the focus is on the ways of using CSS in React.

The five primary ways of styling in React are:

1. CSS Modules

2. Inline Styling

3. Styled Component

4. CSS preprocessor

5. Simple CSS

CSS Modules

CSS modules are a way to break up CSS code into sections providing an organized and reusable structure to the code. With CSS Modules, you can craft CSS code specifically for individual components, which helps avoid style clashes and makes it simpler to maintain and reuse the code.

Here's how CSS Modules work:

If you are using Create React App, you can start using CSS modules with no setup at all.

• You can create CSS Module with a [name].module.css file. For example, styles.module.css.

/*styles.module.css */
.search{
 font-size: 20px;
  border-radius: 20px 20px 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color:white;
  width: 80px;
  border: none;
}
.title{
font-size:60px;
color: #4CAF50;
}

• Then you import the CSS file into the React component using the import statement.

• Use the generated identifier as the class name after importing the CSS module. This keeps CSS styles bound to the component and prevents them from influencing other code areas.

  styles.module.css

App.js

import style from './styles.module.css';

export default function App() {
  return (
  <p className ={style.title> Welcome </p>
   <button className ={style.search}> Search </button>

);
}

The imported styles file contains a compilation of CSS class names that have each been assigned a different identifier.

CSS Modules in React apps are an excellent way to organize your CSS code, making it easier to maintain and decreasing the likelihood of naming conflicts and bugs.

Inline Styling

Incorporating inline styles is the simplest approach to styling any React program. Inline styling in React allows you to add styles to a specific element directly in its JSX code. This method can be practical for basic styling.

function App(){
return (
<div style= {{
 color: '#4CAF50', 
fontSize : 30px, 
padding: 20px }}> This is what we call Inline Styling.</div> 

);}

In this example, I set the style attribute to an object with the property backgroundColor set to the value 'red'. Take note that the object's property names are written in camelCase with the property values being strings.

For readability and to make it reusable, you can also try this method of inline styling.

const myStyle = {
color: "#4CAF50",
fontSize: '36px'
}
export default function App() {
  return (
    <div style= {myStyle}> Inline Styled Component</div>   
  );
}

Styled Components

Styled-components is a widely used library for styling React components in a CSS-in-JS format. This is a creative way to style elements since developers can craft their custom CSS within the same React component.

• To use styled components, you have to install it on your terminal.

  npm install --save styled-components

  yarn add styled-components

• Then, bring the styled-component that is installed into the React component you are working on.

 import styled from 'styled-components';

const Button = styled.button`
   font-size: 20px;
  border-radius: 20px 20px 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color:white;
  width: 80px;
  height: 50px;
  border: none;
`;
export default function App() {
  return (
    <div>
      <Button> Serach </Button>
    </div>
  );
}

Styled components make it easier to manage and maintain the styling of large applications.

CSS Preprocessor

CSS preprocessors are programs that allow you to extend the capabilities of CSS by allowing the use of variables, functions, and other features not normally found in CSS. Sass, Less, and Stylus are some popular CSS preprocessors.

React enables the combination of CSS preprocessors and CSS modules or styled-components for more efficient and maintainable style coding. To use a CSS preprocessor in a React project, you'll need to first install it and configure your project to transform the preprocessed CSS into regular CSS that web browsers can interpret. To use a preprocessor, here are the following steps;

• First, you need to install the preprocessor you want to work with. For example, the most popular pre-processor, SCSS;

npm install node-sass --save-dev

• Configure your build system to turn Sass files into CSS. Webpack, Gulp, or Parcel are all tools you can use for this. Here is an example configuration for Webpack:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  }
}

Create your Sass files with the .scss extension For example:

// styles.scss

$primary-color: #4CAF50;

.search{
  background-color: $primary-color;
  color: white;
  padding: 10px;
}

• Import the SCSS file into your React components using the import statement

// App.js

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

export default function App() {
  return <button className="search"> Search</button>;
}

By including a CSS preprocessor in your React project, you gain the advantage of features like variables, mixins, and nesting, which will make your CSS code more efficient and easier to maintain.

Simple CSS

This is the most popular and easy way of adding CSS to React components. Instead of incorporating inline styling, it's typical to import an external CSS stylesheet to style a React component. CSS written in a stylesheet is a great first choice for your application. To use an external stylesheet, here are the following steps.

• Create a separate CSS file:

Styles.css

/*styles.css*/
.button { font-size: 20px;
  border-radius: 20px 20px 20px 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color:white;
  width: 80px;
  border: none;}

• Import the CSS file in your component and use the className attribute.

    import React from 'react';
    import './styles.css';
  
    function App() {
      return (
        <div className="button">
          Here
        </div>
      );
    }
  

It's a great option for styling a React application if you are familiar with CSS. Taking everything into account, there are some CSS libraries and frameworks, such as Bootstrap and Tailwind CSS, that provide us with the same CSS power with less coding.

Conclusion

I'm hoping this guide clarified or introduced you to fresh approaches to styling React apps, as well as help you decide the right method for your next React App project.