我希望我的浏览器以我指定的样式显示带有 QuickTab 组件的 React 应用程序。
CSS:
.MostPopular{
width: 20%;
height: 100px;
background-color: #0000FF;
border-radius: 0 0 30px 30px;
margin: 2% auto;
position: relative;
}
这是组件。为简洁起见,我省略了其他开关盒。
react ,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'/>
);
}
}
最佳答案
将 className={classes.MostPopular} 替换为 className="MostPopular"并像这样导入您的样式
导入'./QuickTab.css';
或
要求('./QuickTab.css');
关于javascript - React 中的组件 css 类不会渲染到 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52888840/