web-dev-qa-db-ja.com

ClassNameスタイルが動作しない

反応コンポーネントのスタイリングに少し問題があります。別のファイルにscssスタイルシートがあり、それらを私の反応ファイルにインポートしています。私のscss stylsheetは次のようになります：

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

私の反応ファイルは次のようになります：

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

この設定では、スタイルはパススルーされませんが、スター付きの行を<div className='testStyle'>に置き換えても機能する場合、スタイルは正しくインポートされているようです。誰かがこれを手伝ってくれる？ありがとう。

javascriptreactjssass
12
Pmmoks

私はあなたがあなたのウェブパックでCSSローダーを使用していると思います。モジュールを有効にする必要があります：true

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

この動作をデフォルトにしたくない場合は、（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

それを処理させるため。モジュールがある場合：trueで、CSSローダーにクラスをコンパイルさせたくない場合は、

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

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

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

ドキュメントを参照してください： https://github.com/webpack-contrib/css-loader および https://github.com/css-modules/css-modules

7
Roman Nguyen

スタイルシートをインポートすると、Webpackまたは他のビルドツールにそのスタイルシートを処理して出力ファイルに含めるように指示するだけです。私の知る限り、それを使用してJSXをテンプレート化することはできません。したがって、それをインポートするだけで、ビルドサイクルが行われた後にスタイルを使用できるようになります。実際に使用する必要はありません。

classNameは文字列を受け取り、htmlに直接変換しますclass-そのように使用します。

2
erik-sn

.scssファイル名拡張子の名前を.module.scssに変更します

sass-loaderに問題がある場合、または.scssファイルをサポートするように設定していない場合-元のscss形式は.module.scss拡張子のみをサポートします。

私は同じ問題を抱えていて、それが私の問題を修正しました。

ここ を確認することもできます。

1
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

sass-loaderがwebpack構成にない可能性があります。そのためには ここをチェック 、

私の推奨は、sassをドロップし、postcssを使用することです。上記のコードでクラスを使用する方法。

Postcssのインストールと設定について ここをチェック

0
Muhammad Adeel