Question

我有一个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浏览器中渲染时不起作用并得到实现。

Answer 1

您应该使用import "./styles.css";导入样式表，而不要使用className={styles.topBarContainer}，而是执行className="topBarContainer"。

在此处查看有效的沙箱：https://codesandbox.io/s/n4vmvrj7yl

这里的问题是您没有导出具有属性styles的对象topBarContainer，因此不能通过在组件中使用styles.topBarContainer来使用它。相反，您拥有普通的CSS样式表，因此您应该通过将CSS类分配给组件来导入和使用类似于普通CSS的样式。

使用自定义CSS问题覆盖Ant框架CSS

1 个答案: