javascript ClassName样式在react中不起作用

dvtswwa3  于 2023-04-19  发布在  Java
关注(0)|答案(7)|浏览(229)

我在为react组件设置样式时遇到了一个小问题。我将scss样式表放在一个单独的文件中,并将它们导入到我的react文件中。我的scss样式表看起来像这样:

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

我的react文件看起来像这样:

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'>替换星号线,所以它似乎是正确导入的样式。有人可以帮助这一点吗?谢谢。

0qx6xfy6

0qx6xfy61#

我假设你在你的webpack中使用css加载器。你需要启用modules:true

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

如果你不想让这个行为成为默认行为,在你的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

如果你有模块:如果你不想让css loader编译你的类,你可以使用

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

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

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

请参阅文档:https://github.com/webpack-contrib/css-loaderhttps://github.com/css-modules/css-modules

8tntrjer

8tntrjer2#

尝试将.scss文件扩展名重命名为.module.scss**
如果sass-loader有问题,或者您没有将其配置为支持.scss文件-它的原始scss将仅支持.module.scss扩展名。
我也遇到了同样的问题,它解决了我的问题。
你也可以检查here我问的问题。

ycl3bljg

ycl3bljg3#

导入样式表只会告诉Webpack或其他构建工具处理该样式表并将其包含在输出文件中。据我所知,它不允许您使用它来模板化JSX。因此,只需导入它,您的样式将在构建周期发生后可用。您不需要以任何方式实际使用它。
className接受一个字符串并直接转换为html class-所以就像这样使用它。

agyaoht7

agyaoht74#

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;
mklgxw1f

mklgxw1f5#

您的webpack配置中可能缺少 sass-loader。请查看此处,
我的建议是放弃 sass 而使用 postcss,它是广泛的,并且可以像上面代码中使用类的方式工作。
对于postcss安装和配置检查这里

mbjcgjjk

mbjcgjjk6#

一些步骤将解决您的问题

1.文件名必须是:FileName.module.css

1.导入文件到App.js

1.用于组件

1.浏览器

14ifxucb

14ifxucb7#

试试这个:

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

相关问题