it-swarm.com.de

ClassName-Stile funktionieren nicht in reagieren

Ich habe ein kleines Problem mit der Gestaltung von Reaktionskomponenten. Ich habe meine Scss-Stylesheets in einer separaten Datei und importiere sie in meine Reakt-Datei. Mein Scss-Stylsheet sieht so aus:

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

Meine Reakt-Datei sieht folgendermaßen aus:

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

Bei diesem Setup werden meine Stile jedoch nicht durchgereicht, wenn dies funktioniert, wenn ich die markierte Zeile durch <div className='testStyle'> ersetze. Es scheint also, als würden die Stile korrekt importiert. Kann jemand dabei helfen? Vielen Dank.

9
Pmmoks

Ich gehe davon aus, dass Sie in Ihrem Webpack den css loader verwenden. Sie müssen Module aktivieren: true

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

Wenn Sie nicht möchten, dass dieses Verhalten standardmäßig ist, können Sie in Ihrer css (s) Folgendes verwenden:

// 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

um es verarbeiten zu lassen. Wenn Sie über modules: true verfügen und nicht möchten, dass css loader Ihre Klasse kompiliert, können Sie dies verwenden

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

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

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

Lesen Sie die Dokumentation: https://github.com/webpack-contrib/css-loader und https://github.com/css-modules/css-modules

5
Roman Nguyen

Beim Importieren eines Stylesheets werden Webpack oder andere Build-Tools lediglich angewiesen, dieses Stylesheet zu verarbeiten und in die Ausgabedateien aufzunehmen. Soweit ich weiß, können Sie damit nicht JSX vorbereiten. Nur durch den Import sind Ihre Stile verfügbar, nachdem ein Build-Zyklus ausgeführt wurde. Sie müssen es in keiner Weise verwenden.

className nimmt einen String und übersetzt direkt in html class - verwenden Sie ihn also so.

2
erik-sn

Versuchen Sie, die Dateinamenerweiterung .scss In .module.scss Umzubenennen

Wenn es ein Problem mit sass-loader Gibt oder Sie es nicht für die Unterstützung von .scss - Dateien konfiguriert haben, unterstützt das ursprüngliche scss -Format nur die Erweiterung .module.scss.

Ich hatte das gleiche Problem und es hat mein Problem behoben.

Sie können auch hier die Frage überprüfen, die ich gestellt habe.

0
YanivGK
/* loginScreen.js */

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

class loginScreen extends Component {
  render() {
    return (
      <div className={ 'form' }>

      </div>
    );
  }
}

export default loginScreen;
0
anson

In Ihrer Webpack-Konfiguration fehlt möglicherweise der sass-loader . Dafür bitte hier nachsehen ,

Ich empfehle, sass zu verwenden und postcss zu verwenden. Es ist umfangreich und funktioniert so, wie Sie Klassen in Ihrem Code verwenden.

Für eine Postcss-Installation und Konfiguration hier klicken

0
Muhammad Adeel