Adding Styles With Stylesheets In React JS

Styling is an important aspect of web development that allows us to create visually appealing and functional user interfaces. In React, there are several ways to add styles to your components, one of which is using stylesheets. In this blog post, we’ll explore how to add styles with stylesheets in React.

Creating a Stylesheet

To add styles to your React components using a stylesheet, you’ll need to create a stylesheet file with the .css extension. You can place this file anywhere in your project, but it’s common to create a styles directory at the root of your project and place all your stylesheets in that directory.

Here is an example of a simple stylesheet:

.header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

In this example, we’ve defined a class called .header with some basic styles applied to it. You can add as many styles as you need to this stylesheet.

Importing a Stylesheet

Once you’ve created your stylesheet, you can import it into your React component by using the import statement. Here’s an example of how to import a stylesheet:

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

function App() {
  return (
    <div className="header">
      <h1>Welcome to my React app</h1>
    </div>
  );
}

export default App;

In this example, we’ve imported the styles.css file and applied the .header class to a <div> element in our App component. We’ve used the className attribute instead of the class attribute to apply the class, since class is a reserved keyword in JavaScript.

Using Styles in React Components

Now that we’ve imported our stylesheet and applied a class to a component, we can add more styles to our component by defining additional classes in our stylesheet and applying them to other elements in our component.

.header {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

.btn {
  background-color: blue;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  cursor: pointer;
}

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

function App() {
  return (
    <div className="header">
      <h1>Welcome to my React app</h1>
      <button className="btn">Click me</button>
    </div>
  );
}

export default App;

In this example, we’ve added a .btn class to our stylesheet and applied it to a <button> element in our component. This adds some styles to the button, giving it a blue background, white text, and rounded corners.

Conclusion

Using stylesheets to add styles to your React components is a simple and effective way to make your UI more visually appealing and functional. By creating a separate stylesheet file, you can keep your styles organized and apply them to multiple components throughout your application.