ClassName 樣式在反應中不起作用

Question

我在樣式化反應組件方面遇到了一些問題。 我將 scss 樣式表放在一個單獨的文件中，並將它們導入到我的 react 文件中。 我的 scss 樣式表如下所示：

.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'>替換帶星號的行可以正常工作，那么樣式似乎被正確導入。 有人能幫忙嗎？ 謝謝。

Answer 1

我假設你在webpack中使用css loader。 您需要啟用模塊：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 loader編譯你的類，你可以使用

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

Answer 2

嘗試重命名.scss文件擴展名.module.scss

如果sass-loader出現問題或者您沒有將其配置為支持.scss文件 - 它的原始scss格式將僅支持.module.scss擴展名。

我遇到了同樣的問題，它解決了我的問題。

你也可以在這里查看我問過的問題。

Answer 3

導入樣式表只會告訴Webpack或其他構建工具處理該樣式表並將其包含在輸出文件中。 據我所知，它不允許您使用它來模板化JSX。 因此，只需導入它，您的樣式將在構建周期發生后可用。 您無需以任何方式實際使用它。

className接受一個字符串並直接轉換為html class - 所以就這樣使用它。

Answer 4

您的webpack配置中可能缺少sass-loader 。 為此，請點擊這里 ，

我的建議是刪除sass並使用postcss ，它是廣泛的，並且在你上面的代碼中使用類的方式。

對於postcss安裝和配置檢查這里

Answer 5

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;

Answer 6

嘗試這個：

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

Answer 7

我相信，這可能與某些Webpack配置是“散列”類的事實有關，因此您的代碼應該如下所示：

import React from 'react'

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

const selectors = styles as any;

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

看看這是否有幫助。