Question 45994 in CSS Question posted in
Some basic documentation can be found here.

how do i import css inside react component?

i am creating a react component Comp1 and i am importing a css file inside it like this->

import "./style.css";

inside style.css i am doing something like this->

@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css";

but the problem is, this is applying css to all components in react and ruining everything. i want to apply only inside the particular component Comp1 and specifically in this tag->

<div className="comp1">
</div>

please guide me on this. how do i do that? let me know if u need any more info.

Tags:

2

Answers


  1. 0

    If you use Create React App, you can use CSS modules for this.

    Login or Signup to reply.
  2. 0

    like @tymzap mentioned, you can use css modules.

    In JS, you need to rename your filename.css to filename.module.css
    and you need to import that css file to your react component

    import styles from "../related_directory/filename.module.css
....
<Component className={styles.some_classname_in_your_css} />

    In TS, you need to create a type declaration file named declarations.d.ts
    in that file you need to define css or scss files as modules.

    declare module "*.module.scss"

    hope it will help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search