Add style to components in React JS day#3

Hello, guys welcome back today. In the previous article, we see components in react. In this, we going to see how to add styles to components. so let’s get started.

1. Introduction to react js
2. Hello world in React JS day#1
3. Components in React JS day#2
4. Add style to components in React JS day#3
5. State in React JS day#4  
6. Props in React day#5
7. Handling events in React JS day#6
8. Accessing DOM elements in React JS day#7
9. Conditional rendering in React JS day#8
10. Adding logic to the game part-1 day#9
11. Adding logic to the game part-2 day#10

Add styles to components

It very simple to add style to components. Let’s see the steps to add styles to react components.

1. Create the CSS file and write CSS code on it.
2. Import the CSS file in the component that you want to apply styles.

Let’s understand with an example.

Now create a style for our header component. We not going to cover and explain the style because I assume that you are good enough to understand CSS and don’t want to waste time on that. So in the upcoming tutorial, I simply insert the CSS code for each component.

Add the following style in the Header.css file.

Header.css

.header {
text-align: center;
margin: 0;
display: flex;
justify-content: center;
height: 10vh;
align-items: center;
background-color: white;
border:1px solid #3bff41;
border-radius: 10px;
}
.header p {
font-size: 2rem;
text-align: center;
margin: 0;
}

We completed step 1.

The next step is to import the style into the corresponding component.

Import the style simply use the import keyword.

Header.js

import React from "react";
import "./Header.css";

class Player extends React.Component
{
 render()
 {
   return(
       <div className='header'>
        <p> RPS Battle</p>
       </div>
      );
 }
}

export default Header;

Adding style to App component

Now let’s add style to the App component as follow.

Add these styles to the App.css file.

App.css

body
{
background-color: #3bff41;
border: 10px solid white;
border-radius: 34px;
height: 90vh;
width: 80vw;
margin: auto;
margin-top: 15px;
}
#title
{
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
#title span
{
font-size: 1.9rem;
font-family: 'Lobster', cursive;
}

@media (max-width:652px)
{
body
{
border:15px solid white;
}
}

Now import the style in the App.js file.

App.js

import React from 'react';
import './App.css';
import Header from "./components/Header";

class App extends React.Component
{
 render()
 {
   return(
        <div>
           <Header/>
        </div>
      );
 }
}

 

After importing save our code and run the program you will get the output as below.

Conclusion

Ok guys that’s enough for today. We learn about how to add styles to react components in this article. In the next article, we learn about the state in react.

All the best guys for upcoming days keep learning.