2
votes

Comment éviter les conflits CSS dans ReactJs

Je ne suis pas du tout un expert en react, mais d'après ce que j'ai pu voir si j'importe des feuilles de css, celles-ci seront pour toutes mes applications. Si je voulais utiliser react pour une application multi-pages, comment définir des feuilles CSS pour chaque page?

MODIFIER

Ceci est ma structure simple strong>

Page 1

import React, { Component } from "react";
import Page1 from "./Page1";
import Page2 from "./Page2";

class App extends Component {
  render() {
    return (
      <div classNameName="App">
        <Page2 />
      </div>
    );
  }
}
export default App;

style.css [Ce style ne doit être appliqué qu'à la première page]

import React, { Component } from "react";

export default class Page2 extends Component {
  render() {
    return (
      <div>
        <button>no css</button>
      </div>
    );
  }
}

Page 2

button {
  background: green;
}

Le problème ne se produit pas si je n’importe pas la page 1 dans le fichier principal, mais je dois l’importer pour le routeur

import React, { Component } from "react";
import "./style.css";

export default class Page1 extends Component {
  render() {
    return (
      <div>
        <button>with css</button>
      </div>
    );
  }
}

javascript reactjs html css frontend

5 commentaires

vous utilisez webpack? de toute façon, importez le fichier css uniquement dans le composant enfant no à la racine

^ Le problème persiste, comme indiqué par OP, car chaque style importé dans n'importe quel composant est disponible globalement et s'applique à l'ensemble de l'application (car le css est ajouté).

Pouvez-vous montrer comment vous les importez? Les incluez-vous simplement dans votre index.html? Utilisez-vous un bundler? (si oui, lequel?) etc.

Double possible de Comment rendre React CSS importé à l'échelle du composant?

Consultez également cet article sur le CSS modulaire et ce problème sur la portée CSS

6 Réponses :

1
votes

Voici une application de réaction aléatoire:

Je crée des fichiers CSS pour mes conteneurs (pages) et j'importe ensuite dans :

import './styleForComponent.css'

Le style s'applique au composant enfant et ne s'intègre pas à mes autres pages, si vous voulez un style global, vous pouvez l'importer dans index.html comme vous le feriez sans React ou import votre css dans votre index.js

0 commentaires

1
votes

si vous importez au niveau supérieur du composant, par exemple:

import ReactDOM from "react-dom";
import "./yourCSS.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Ensuite, dans tous les enfants, les composants seront visibles.

0 commentaires

1
votes

Vous pouvez rechercher des composants stylisés ou react-jss. Ceux-ci aideront à lier les styles spécifiques à ce composant. Les styles ne seront pas en conflit avec les autres composants

Un exemple de code react-jss ressemble à ceci

import injectSheet from 'react-jss'
var styles = {
  button : {
   //styles here
  }
}


const Button = ({ classes}) => (
  <button className={classes.myButton}>
      Hello
    </button>
)

const StyledButton = injectSheet(styles)(Button)
//render it
 <StyledButton></StyledButton>

0 commentaires

0
votes

Vous pouvez utiliser module.css ou Styled Components pour éviter cette erreur. Au lieu d'utiliser "./style.css", créez un fichier nommé "./style.module.css" cela limitera les styles uniquement à votre composant Exemple d'utilisation -

import React, { Component } from "react";
import styles from "./styles/FlexDemo.module.css";
export default class FlexDemo extends Component {
    render() {
        return (
            <div className={styles.container}>
                <div className={styles.subContainer}>
                    <img
                        src="https://source.unsplash.com/random"
                        width="40%"></img>
                    <div className={styles.subText}>
                        <h1>Flex Box Demo</h1>
                        <p>
                            Aliquip ea culpa dolore ut culpa culpa incididunt
                            minim culpa qui elit veniam ut. Excepteur irure
                            voluptate amet nisi excepteur non dolore ipsum id
                            dolor proident mollit nostrud nulla. Duis proident
                            voluptate quis sit excepteur ut qui mollit. Anim
                            ullamco nostrud proident amet nulla ut est deserunt
                            cillum. Ea ex nostrud occaecat consectetur et.
                        </p>
                    </div>
                </div>
            </div>
);
}}

Voici le fichier css image du fichier css

0 commentaires

-1
votes

Tout ce dont vous avez besoin est d'importer les styles pour l'ensemble de l'application comme suit:

import ReactDOM from "react-dom";
 import "./TheWholeAppStyle.css"; 
import App from "./App"; ReactDOM.render(<App />,document.getElementById("root"));

0 commentaires

1
votes

Le moyen le plus simple d'éviter les conflits css entre les pages sur Reactjs est d'utiliser css-modules (ce n'est pas une dépendance), changez simplement le nom de votre feuille de style de page à partir de " ma-feuille de style.css 'dans' my-stylesheet.module.css 'et importez-le sous' my-stylesheet.module.css '.

0 commentaires