web-dev-qa-db-fra.com

Les styles ClassName ne fonctionnent pas dans react

J'ai un petit problème avec le style des composants de réaction. J'ai mes feuilles de style scss dans un fichier séparé et les importe dans mon fichier de réaction. Ma feuille de style scss ressemble à ceci:

.testStyle {
  font-family: avenir;
  color: blue;
}

Mon fichier de réaction ressemble à ceci:

import React from 'react'

import styles from '../styles/main.scss'

class Temp extends React.Component {
  render() {
    return (
      **<div className={styles.testStyle}>**
        <h1>Hello</h1>
      </div>
    )
  }
}

export default Temp

Avec cette configuration, mes styles ne sont pas transmis, cependant, si cela fonctionne si je remplace la ligne précédée par <div className='testStyle'>, il semblerait que les styles soient importés correctement. Quelqu'un peut-il aider avec ça? Merci.

javascriptreactjssass
9
Pmmoks

Je suppose que vous utilisez css loader dans votre pack Web. Vous devez activer les modules: true

{
  loader: 'css-loader',
  options: { 
    modules: true
  }
}

Si vous ne souhaitez pas que ce comportement soit par défaut, vous pouvez utiliser dans votre (s) css:

// sCSS
:local .yourClass {...}

// JS

import cls from '../yourCss.scss'

const Component = () => (
  <div className={cls.yourClass} />
)

// yourClass will become some random hash
// or something else based on your css loader config

pour le faire traiter. Si vous avez des modules: true et que vous ne voulez pas que css loader compile votre classe, vous pouvez utiliser

// CSS
:global .yourGlobalClass {...}

// JS
import '../yourCss.scss'

const Component = () => (
  <div className="yourGlobalClass" />
)

Voir la documentation: https://github.com/webpack-contrib/css-loader et https://github.com/css-modules/css-modules

5
Roman Nguyen

L'importation d'une feuille de style indiquera simplement à Webpack ou à d'autres outils de construction de traiter cette feuille de style et de l'inclure dans les fichiers de sortie. Autant que je sache, cela ne vous permet pas de modéliser JSX avec. Donc, juste en l'important, vos styles seront disponibles après un cycle de construction. Vous n'avez pas besoin de l'utiliser de quelque manière que ce soit.

className prend une chaîne et traduit directement en html class - utilisez-le ainsi.

2
erik-sn

Vous pourriez avoir sass-loader manquant dans la configuration de votre pack Web. Pour cela s'il vous plaît vérifier ici ,

Ma recommandation est de supprimer sass et d'utiliser postcss , il est très complet et fonctionne comme vous utilisez les classes de votre code ci-dessus.

Pour une installation postcss et config cliquez ici

0
Muhammad Adeel