[英]ClassName styles not working in react
I'm having a little issue with styling react components.我在样式化反应组件方面遇到了一些问题。 I have my scss stylesheets in a separate file and importing them into my react file.
我将 scss 样式表放在一个单独的文件中,并将它们导入到我的 react 文件中。 My scss stylsheet looks like this:
我的 scss 样式表如下所示:
.testStyle {
font-family: avenir;
color: blue;
}
My react file, looks like this:我的反应文件,看起来像这样:
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
With this setup, my styles are not passed through, however, if it works if I replace the starred line with <div className='testStyle'>
, so it seems like the styles are being imported correctly.使用此设置,我的样式不会通过,但是,如果我用
<div className='testStyle'>
替换带星号的行可以正常工作,那么样式似乎被正确导入。 Can anyone help with this?有人能帮忙吗? Thanks.
谢谢。
I assume you are using css loader in your webpack. 我假设你在webpack中使用css loader。 You need to enable modules:true
您需要启用模块:true
{
loader: 'css-loader',
options: {
modules: true
}
}
If you don't want this behaviour to be default, in your (s)css you can use: 如果您不希望此行为成为默认行为,则可以在(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
to have it processed. 处理它。 If you have modules: true and you don't want css loader to compile your class, you can use
如果你有模块:true并且你不希望css loader编译你的类,你可以使用
// CSS
:global .yourGlobalClass {...}
// JS
import '../yourCss.scss'
const Component = () => (
<div className="yourGlobalClass" />
)
See the documentation: https://github.com/webpack-contrib/css-loader and https://github.com/css-modules/css-modules 请参阅文档: https : //github.com/webpack-contrib/css-loader和https://github.com/css-modules/css-modules
Try to rename the .scss
filename extension to .module.scss
尝试重命名
.scss
文件扩展名.module.scss
If there's a problem in the sass-loader
or you didn't configure it to support .scss
files - it's original scss
format will support only the .module.scss
extension.如果
sass-loader
出现问题或者您没有将其配置为支持.scss
文件 - 它的原始scss
格式将仅支持.module.scss
扩展名。
I had the same problem and it fixed my issue.我遇到了同样的问题,它解决了我的问题。
You can also check here the question I've asked of it.你也可以在这里查看我问过的问题。
Importing a stylesheet will simply tell Webpack or other build tools to process that stylesheet and include it in the output files. 导入样式表只会告诉Webpack或其他构建工具处理该样式表并将其包含在输出文件中。 It does not, as far as I know, allow you to template JSX with it.
据我所知,它不允许您使用它来模板化JSX。 So just by importing it your styles will be available after a build cycle takes place.
因此,只需导入它,您的样式将在构建周期发生后可用。 You don't need to actually use it in any way.
您无需以任何方式实际使用它。
className
takes a string and directly translates to html class
- so use it like that. className
接受一个字符串并直接转换为html class
- 所以就这样使用它。
You might have the sass-loader missing in your webpack configuration. 您的webpack配置中可能缺少sass-loader 。 For that please check here ,
为此,请点击这里 ,
My recommendation is to drop sass and use postcss , it's extensive and works the way your are using classes in your code above. 我的建议是删除sass并使用postcss ,它是广泛的,并且在你上面的代码中使用类的方式。
For a postcss install and config check here 对于postcss安装和配置检查这里
/* loginScreen.js */
import React, { Component } from 'react';
import './styles.css'
class loginScreen extends Component {
render() {
return (
<div className={ 'form' }>
</div>
);
}
}
export default loginScreen;
尝试这个:
import * as styles from '../styles/main.scss'
This, I believe, might be related to the fact that some Webpack configs are "hash'ing" the classes, therefore your code should perhaps look like this: 我相信,这可能与某些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>
)
}
}
See if this helps. 看看这是否有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.