使用react-css-modules时样式不适用
使用react-css-modules时样式不适用
提问于 2016-09-16 13:30:34
一切看起来都很好，没有错误，但是页面上的元素仍然没有样式。
webpack.config.js
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
},
plugins: [
new ExtractTextPlugin('app.css', {
allChunks: true
}),
],Layout.js
import React, { Component } from 'react';
import InteractiveMap from './InteractiveMap';
import Header from './header';
import Navigation from './navigation';
import CSSModules from 'react-css-modules';
import styles from './Layout.css';
class Layout extends Component {
render() {
return (
<div>
<div className={styles.mapContainer}>
<InteractiveMap />
</div>
<div>
<Header className={styles.header}>
<Navigation menuItems={menuItems}/>
</Header>
</div>
</div>
);
}
}
export default CSSModules(Layout, styles);Layout.css
//testing
.mapContainer: {
padding: 0;
background-color: black;
height: 100%;
color: yellow;
}
.header {
color: yellow;
background-color: blue;
}编译的app.css
.Layout__mapContainer___3yH5h: {
padding: 0;
background-color: black;
height: 100%;
color: yellow;
}
.Layout__header___2kJ4F {
color: yellow;
background-color: blue;
}正如您在图片上看到的，类被生成并应用于元素，但在页面上什么也没有显示。image
回答 3
Stack Overflow用户
发布于 2016-09-16 14:18:12
在react-css-modules中，您使用styleName而不是className：
<div styleName="container">这应该是可行的：
class Layout extends Component {
render() {
return (
<div>
<div styleName="mapContainer">
<InteractiveMap />
</div>
<div>
<Header styleName="header">
<Navigation menuItems={menuItems}/>
</Header>
</div>
</div>
);
}
}Stack Overflow用户
发布于 2018-07-23 06:17:45
我也有同样的问题..我的问题是我没有在.html文件中包含生成的css样式表。
没有样式表
<html>
<head>
</head>
<body>
<div id = "hero"> </div>
<script type="text/javascript" src="bundle.js"></script>
</body>
使用样式表(修复)
<html>
<head>
<link rel='stylesheet' href='app.css'>
</head>
<body>
<div id = "hero"> </div>
<script type="text/javascript" src="bundle.js"></script>
</body>
Stack Overflow用户
发布于 2021-01-11 17:41:16
您需要添加前缀"module"，例如：
import styles from './Layout.module.css';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39524284
复制相关文章
相似问题