样式不适用于react-css-modules

发布时间：2020-12-15 09:35:30 所属栏目：百科来源：网络整理

导读：一切似乎都很好,没有错误,但页面上的元素仍未设置样式. webpack.config.js { test: /.css$/,loader: ExtractTextPlugin.extract('style','css?modulesimportLoaders=1localIdentName=[name]__[local]___[hash:base64:5]')},plugins: [ new ExtractTextPlugi

一切似乎都很好,没有错误,但页面上的元素仍未设置样式.

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

解决方法

在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>
    );
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!