5 Ways To Handle CSS in React

 Introduction

There are three main component in web development HTML , CSS , Javascript where to include external , internal , inline  CSS is quite easy but when Facebook release the React there jsx is born which is a hybrid of javascript and html that makes to style component bit differently and many developers find it difficult to include CSS in React .
That's why in this blog we will discuss about some methods for how to include CSS in  React

Let's get started !

1. Internal CSS

Internal CSS is used when you want to design the particular element and which is quite straight forward . You just specify the attribute style and include CSS properties in the camelCase and values in the string to be placed in the object which enclosed in later jsx object which is used to style the element . You can also specify the pre-defined object of CSS in the in the jsx object. Look at the below example of using the internal CSS in react


  CSS styles may be event created in object and used in style attribute as shown below :-



2. External CSS ( CSS file )

Just like we create the CSS file traditionally and link in the html likely we do in react . We just create the external css file and import in the component we need to used also specify the className="" to the element that has specified in the css file.

Create a Css file and write some content


Import into the component to style the elements and specify the className which is defined in the CSS file


3. Styled Components

Styled components is the package which needs to be installed and then we can inherit css in the components with the pre-defined css . We will render components just like earlier but styled components. As shown in the example below,

Since it is a npm package , first you have to install in the react


Then style the components without even defined style in className and style attribute.
We use the styled object with any html element where we can start styling the component with the template literal introduced in ES6 . 


Then , we render the component but with some pre-defined style.

4. Using CSS Modules

We can create the CSS file with the name.module.css and import the classes into the component . Then , we just use the variable where we import the file and use the dot notation to extract the classes from the css module file. These modular files are used when using the big or complex projects and can create separate css module file for each module.

Create a Page.module.css with the css content


And import it into the component where you want to use


5. Tailwind CSS

Tailwind css is used for fast css implications where you just need to import the package and use the shortcuts for margin , padding , width , height etc. to enhance productivity in the website development



  Since the tailwind provides the utility first css class , it will provide the pre-defined css classes to interact.

Conclusion

So, in the conclusion we see the different methods of handling css into react where the inline and style components css method used to style the components quickly and which are not broad or lengthy for the element whereas the global css file , CSS module and tailwind css is used for the complex projects where you deal every component on the modular basis .

Thank you for reading :)

Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more