1
votes

Pourquoi "affichage: aucun! Important" ne fonctionne pas ici?

La feuille de style est vraiment simple donc je ne sais pas ce qui pourrait gâcher le résultat. J'ai vérifié le style dans les "éléments". Il semble que je ne puisse pas remplacer «display: block» dans la feuille de style de l'agent utilisateur même si j'ai utilisé «! Important».

.App {
  font-family: sans-serif;
  text-align: center;
  .hide {
    display: none !important;
  }
}

feuille de style

import React from "react";
import ReactDOM from "react-dom";

import "./styles.less";

function App() {
  return (
    <div className="App">
      <div className="hide">Hello CodeSandbox</div>
    </div>
  );
}

lien avec l'environnement:

Je m'attends à ce que" Hello CodeSandbox "disparaisse.

reactjs display less

3 commentaires

Vos règles ne sont pas du tout appliquées. Sinon, le texte serait au moins centré. Je ne sais pas assez sur less ou codesandbox pour dire quel est le problème ici, mais ce n'est pas avec React lui-même ou les règles CSS.

Alors pensez-vous que c'est le problème de CodeSandbox?

Peut-être. Ou avec le bundler. Ou avec le fait que vous ne pouvez pas importer de feuilles de style comme ça (peut-être). Je veux dire, le navigateur doit soit obtenir un élément style ou un élément link ou quelque chose doit définir des styles en ligne.

4 Réponses :

1
votes

L'application Create React 2 (CRA2) prend en charge le SASS prêt à l'emploi. Je suppose qu'officiellement le CRA2 ne prend pas en charge le MOINS. Donc, si vous avez besoin d'exactement MOINS, vous pouvez utiliser react-app-rewired . Ce paquet réécrit la configuration du webpack sans éjection.

0 commentaires

0
votes

Aucun de vos styles n'est appliqué, et c'est parce que le modèle de codesandbox par défaut (je suppose, basé sur Create React App) ne prend pas en charge moins.

C'est un peu trompeur, car il ne génère pas d'erreur, mais ce qu'il fait est en fait d'importer le fichier en texte brut, sans le définir comme style.

Deux façons de voir cela, c'est que vous pouvez important le texte réel:

import less_text from './styles.less';

console.log('less_text:', less_text);

0 commentaires

0
votes

Je pense que le problème est qu'il vous manque moins de processeur. Par défaut, le navigateur ne comprend pas moins et si vous utilisez webpsck, vous avez besoin d'un chargeur pour cela

0 commentaires

0
votes

Il vous faut moins de chargeur. Quelque chose comme ça https://medium.com/@joseph0crick / react-css-modules-moins-webpack-4-a50d902d0a3

0 commentaires