Переопределение Ant Framework Css с помощью пользовательской проблемы Css

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, который я пытаюсь реализовать, не работает и применяется при рендеринге в веб-браузере.

Answer 1

Вы должны импортировать таблицу стилей, используя import "./styles.css"; и вместо className={styles.topBarContainer}, сделайте className="topBarContainer".

Смотрите рабочую песочницу здесь: https://codesandbox.io/s/n4vmvrj7yl

Проблема в том, что вы не экспортировали объект styles со свойством topBarContainer, поэтому вы не можете использовать его как один, используя styles.topBarContainer в своем компоненте. Вместо этого у вас есть обычная таблица стилей CSS, поэтому вы должны импортировать и использовать стили, как обычный CSS, назначив класс CSS компоненту.