CSS overlapping in React

Question

I have 2 different pages and a .css file for each page. Both have a class selector with the same name, but only one of them is applied. I've only worked with react-native so far, and had both the content and the styling in the same file. I couldn't figure out what is happening...

Let's say we have the following css class:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Even if the css file is not imported in one file, the class is applied to a div, if it's given in className.

For example, we have 2 files: CarPage.tsx and BikePage.tsx. The container class is imported in CarPage, but it's used in BikePage and it is applied. Does anyone know if this is how it should work?

El Hassane Essadrati · Accepted Answer · 2022-12-30 13:01:14Z

1

In React, once CSS is imported, it will be "combined" and applied to the entire DOM. React uses CSS files as global scope.
In order to achieve locally scoped CSS, you will have to use:

CSS module

Create `[name].module.css` file then:

import React, { Component } from 'react';
import styles from './example.module.css';

class Example extends Component {
    render() {
        return <button className={styles.container }>Button</button>;
    }
 }
 export default Example;

using libraries such as styled-components).

  class Example extends Component {
         const Button = styled.button`
           background: transparent;
           border-radius: 3px;
           color: red;
           margin: 0 1em;
           padding: 0.25em 1em;
           `
          render(){
           return  <Button /> 
           };

 }

answered Dec 30, 2022 at 13:01

El Hassane Essadrati

4434 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nandor Krizbai Over a year ago

Thank you for helping me! Tried it with CSS module.

Collectives™ on Stack Overflow

CSS overlapping in React

1 Answer 1

CSS module

using libraries such as styled-components).

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related