Can anyone advise on the proper way to import CSS within a React component?

I'm currently working on a React component named Comp1 and I've included a CSS file within it like so:

import "./style.css";

Within the style.css file, I'm using the following line:

@import "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736c736e">[email protected]</a>/dist/css/bootstrap.min.css";

However, the issue I'm facing is that this applies the CSS globally to all React components, causing conflicts. I want to restrict this styling to just the specific component Comp1, and specifically apply it within the tag:

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

Could you please advise me on how to achieve this? Let me know if you require any further information.

cssreactjs

Answer №1

When utilizing Create React App, incorporating CSS modules is the way to go.

Answer №2

As mentioned by @tymzap, utilizing css modules is a viable solution.

In JavaScript, simply rename your filename.css to filename.module.css and import that css file into your React component:

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

For TypeScript, create a type declaration file called declarations.d.ts where you define css or scss files as modules:

declare module "*.module.scss"

This approach should prove helpful in managing your CSS styles effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions on how to navigate to a class page by clicking a button in a ReactJS interface

I am currently working with React and have implemented 3 classes in separate files. The App.js file contains a navbar and button, which when clicked, displays a table from 'Table.js'. I have also added buttons in front of each row in the table th ...

javascripthtmlreactjs

Height of Material UI Cards

It feels like there's a simple solution here that I just can't seem to grasp. Currently, I'm utilizing React with Material-UI card components to showcase albums along with track lists. The issue arises when the expandable cards fill up 100 ...

reactjsmaterial-ui

What is the process for including a field specific to a date in a form?

I need the user to select a month and year. In one column, there will be the days of the month they selected [e.g. 1-30]. Users can then add habits in other columns. I want users to be able to input an 'X' for each habit row on a specific date [e ...

javascripthtmlreactjs

The image shape at the bottom of the screen may disappear on certain resolutions

I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tri ...

htmlcssbootstrap-5card

In what way are these fonts being displayed through the utilization of a .js file?

Why are people opting for unique fonts on their browsers using .js files instead of graphics? For example, like typekit? ...

javascripthtmlcssfonts

Strategies for avoiding the opening of a new tab when clicking on a link in ReactJs

RenderByTenantFunc({ wp: () => ( <Tooltip id="tooltip-fab" title="Home"> <Button className="home-button"> <a href={ ...

htmlcssreactjs

Rotating a CSS div causes the page to scroll horizontally

Currently, I am working on creating a unique design for the footer of my website. However, when implementing it, I encountered an issue that is causing a horizontal scroll (red background added for clarity). To address this problem and prevent the page fr ...

htmlcssrotationcss-transformshorizontal-scrolling

After successfully retrieving the data from the backend using express.js, I am facing difficulties in saving it in a state variable

import { useQuery, gql } from "@apollo/client"; import { getbooks } from "../../GraphQl/Queries"; function BookList() { const { error, loading, data } = useQuery(getbooks); const [book, setbook] = useState([]); useEffect(() =& ...

reactjsexpressgraphql

What is the best way to transfer properties to a different component using the onClick event triggered by an element generated within the map function?

I am currently working on an application using react to retrieve data from a mongodb database. Within one of the components, called Gallery, I have integrated a map function to display a list of items. My goal is to implement an onClick event for each elem ...

javascriptreactjsmongodbreact-hooks

Any tips on how to personalize the loading animation for single pages using CSS and GIFs?

presentLoading(message) { this.loading = this.loadingCtrl.create({ dismissOnPageChange: false, spinner:'hide', content:`<img class="load" src="assets/dual.gif" />`, }); this.loading.present(); } Hello there! I am working with the ...

htmlcssangularbootstrap-4ionic3

How can I ensure that my navbar-right remains fixed to the right side of the screen and is always visible at the top of the page as I

When the page first loads: After scrolling down: I am attempting to create a fixed navigation bar at the top of the screen, so that it remains visible as the user scrolls down the page. However, I am facing an issue where my navbar brand is positioned to ...

htmlcssbootstrap-4navbar

How can I adjust the font size of material-ui buttons while ensuring that they scale appropriately?

Having trouble adjusting the font sizes on Material-UI's RaisedButton for React and ensuring that the button scales properly along with it. <RaisedButton label={<span className="buttonText">Log in Here</span>} /> CSS: .buttonText ...

javascriptcssreactjsmaterial-uijsx

Steps to assign a default value to the KeyboardTimePicker

I am utilizing the KeyboardTimePicker component from material ui to fetch a time of service such as "10:20". How can I make this time ("10:20") the default selection? When attempting to set this time, I am receiving an error stating " ...

javascriptreactjsdatetimematerial-ui

React and Array JavaScript combined to create a dynamic To DoList application

First and foremost, I would like to apologize for any grammatical errors in my English, as I am Brazilian. Currently, I am working on creating a React test application that renders a to-do task list using the JavaScript map method. However, I am facing an ...

arraysreactjsdictionary

Automatically collapse the responsive menu upon selecting a menu item

I have implemented a custom JavaScript code for a basic open/close menu movement on multi-page websites. The code works by closing the menu only when the user clicks the menu symbol. However, I now need to incorporate this code into a one-page website and ...

javascriptjqueryhtmlcssresponsive-design

Is it possible to create a carousel using PHP and MySQL?

Is it really impossible? I'm determined to pull images from a MySQL database and create a carousel similar to the one showcased in this link: . However, my goal is to achieve this using only HTML, CSS, PHP, and MySQL. ...

phphtmlmysqlcsscarousel

The email address '[email protected]' is not found in this database

Attempting to execute npm install for a react js project is resulting in the following error message. Error: E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/login-history-api-fallback - Not found npm ERR! 404 npm ERR! 404 '<a href="/ ...

reactjsnpmregistrynpm-installnpm-package

Enhancing the appearance of your website by incorporating external stylesheets and utilizing multiple class names through

Is it possible to use external CSS frameworks like Bootstrap, Semantic UI, or Foundation and still generate base64 class names? This could be achieved if there was a way to apply multiple class names. Currently, you can only assign one class name like thi ...

cssreactjswebpack

What is the best approach to validating GraphQL query variables while utilizing Mock Service Worker?

When simulating a graphql query with a mock service worker (MSW), we need to verify that the variables passed to the query contain specific values. This involves more than just type validation using typescript typings. In our setup, we utilize jest along ...

reactjstypescriptjestjsgraphqlmsw

What is the best way to retrieve menu items for a Select Menu in ReactJS with MUI?

Attempting to configure material select for React. Check out this example App component. import './App.css'; import Select from 'react-select' import { MenuItem, TextField } from '@mui/material'; function App() { retu ...

reactjsmaterial-ui