我有一个React组件,并且正在将Ant设计框架集成到React之上。我有3列蚂蚁行。我也有一个具有自定义CSS的CSS文件。我想使用自定义CSS并在其之上添加CSS。呈现时,css文件中没有我的css被实现到组件中。
这是反应成分:
import React, { Component } from 'react';
// import Logo from '../../../static/images/bootup-logo.png';
import styles from './Topbar.css';
import Name from '../../static/images/bootup-name.png';
import { Row, Col } from 'antd';
render(){
return(
<div className="top-bar-container">
<Row className={styles.topBarContainer}>
<Col className={styles.imageContainer} span={6}>
<img className={styles.nameImage} src={Name} alt=""/>
</Col>
<Col span={12}></Col>
<Col span={6}></Col>
</Row>
</div>
)
}
jsx和css文件位于同一文件夹中
这是我正在使用的CSS:
.topBarContainer {
background-color: #64B5F6;
}
.imageContainer {
padding-left: 8px;
}
.nameImage {
height: 48px;
}
有人可以帮我弄清楚为什么我要实现的css在Web浏览器中渲染时不起作用并得到实现。
答案 0 :(得分:0)
您应该使用import "./styles.css";
导入样式表,而不要使用className={styles.topBarContainer}
,而是执行className="topBarContainer"
。
在此处查看有效的沙箱:https://codesandbox.io/s/n4vmvrj7yl
这里的问题是您没有导出具有属性styles
的对象topBarContainer
,因此不能通过在组件中使用styles.topBarContainer
来使用它。相反,您拥有普通的CSS样式表,因此您应该通过将CSS类分配给组件来导入和使用类似于普通CSS的样式。