React 中的组件 css 类不会渲染到 DOM答案

【问题标题】：Component css class in React will not render to DOMReact 中的组件 css 类不会渲染到 DOM
【发布时间】：2019-03-24 03:18:12
【问题描述】：

我希望我的浏览器以我指定的样式显示带有 QuickTab 组件的 React 应用程序。

这是我的浏览器当前显示的内容：

CSS：

.MostPopular{
  width: 20%;
  height: 100px;
  background-color: #0000FF;
  border-radius: 0 0 30px 30px;
  margin: 2% auto;
  position: relative;
}

这里是组件。为简洁起见，我没有考虑其他开关盒。

反应，QuickTab.js：

 import React, {Component} from 'react';
 import classes from './QuickTab.css';
 import PropTypes from 'prop-types';

class QuickTab extends Component{
  render(){
    let quickTab = null;

    switch(this.props.type){

      case('most-popular'):
        quickTab= <div className={classes.MostPopular}></div>
        break;

      default:
        quickTab= null;

    }

    return quickTab;
  }
}

//Add prop type validation
QuickTab.propTypes = {
  type: PropTypes.string.isRequired
};

export default QuickTab;

这是我的 App.js 文件中的组件调用：

import React, { Component } from 'react';
import QuickTab from'../components/QuickTabGroup/QuickTab/QuickTab';

class App extends Component {
  render() {
    return (
      <QuickTab type='most-popular'/>
    );
  }
}

【问题讨论】：

标签： javascript css reactjs dom

【解决方案1】：

将 className={classes.MostPopular} 替换为 className="MostPopular" 并像这样导入您的样式

导入'./QuickTab.css';

或

require('./QuickTab.css');

【讨论】：