Add style.css for a specific component in react

Question

I'm trying to add a CSS file for a specific component in react, but the CSS file apply in all component How can I add style.css for a specific component?

import React, { Component } from "react";
import { Link } from "gatsby";
import Layout from "../components/layout"
import Footer from "../components/Globals/Footer"
import "./crm2.css"


class Crm extends Component {
    render() {
      ...
    }
}

Answer 1

You can refer to this link on which the narrator is explaining the options you have for styling the React Components. Styling in React

Your options are

1. In-Line styling
2. Using variables
3. styling by means of a function or method inside the component

Once you take a look at the video link, you will know what approach suits you the best.

Answer 2

Your CSS className must be unique. If you write CSS for this class then it will be applied to the specified component.

There are two components in React

1. Built-in component (like <p>, <div>, <span>, etc)
2. React component (like <App/>,<Product>, etc)

React components allows you to break up the UI into different pieces so that it can then be reused and handled individually. It is the Dot-notation component like <UserContext.Provider> and any component which starts with a capital letter.

These components can be styled if you provide a unique className to those components and you write a CSS style for that.

You might have styled the built-in component as shown below

style.css file:

p {
font-size:14px;
color: red;
}

Using the above approach, the CSS would be applied to all the <p> component in all the JSX file.

If you have wanted to style the React component then you need to select those components and styled it as shown below.

<Product className = "items" />

CSS would be

.items {
   color: red;
   ...
}