Пользовательский CSS не применяется. Net Core React App

Question

Я использую Reactstrap и пытаюсь добавить пользовательский CSS, но пользовательский CSS не применяется.

Вот фрагмент кода.

Ниже находится Home. js file

import React, { Component } from 'react';
import { Row, Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import './Home.css'

export class Home extends Component {

    constructor(props) {
        super(props);
        this.state = { showForm: false, btnText: "Add Record", formClass: "formHide" };
        this.addRecord = this.addRecord.bind(this);
    }

    addRecord() {
        if (this.state.btnText === 'Back') {
            this.setState({ btnText: 'Add Record' });
            this.setState({ formClass: "formHide" });
        } else {
            this.setState({ btnText: 'Back' });
        }
    }

    render() {
        return (
            <section>
                <h1 className='centerTitle'>Welcome to Fit Buddy</h1>
                <Row>
                    <Col sm={9}></Col>
                    <Col sm={3}>
                        <Button color="primary" onClick={this.addRecord}>{this.state.btnText}</Button>
                    </Col>
                </Row>
                <Form className={this.state.formClass}>
                    <FormGroup row>
                        <Label for="exampleSelect" sm={3}>Exercise Type</Label>
                        <Col sm={9}>
                            <Input type="select" name="select" id="exampleSelect">
                                <option>Push Ups</option>
                                <option>Sit Ups</option>
                            </Input>
                        </Col>
                    </FormGroup>
                    <FormGroup row>
                        <Label for="exampleReps" sm={3}>No. of Reps</Label>
                        <Col sm={9}>
                            <Input type="text" name="text" id="exampleReps" placeholder="Enter number of Reps" />
                        </Col>
                    </FormGroup>
                </Form>
            </section>
        );
    }
}

Ниже находится Home. css file

centerTitle {
    text-align: center !important;
}

formHide {
    display: none !important;
}

Я попытался отладить с помощью Инструментов разработчика, это код, который я вижу. Мой стиль есть и он правильно применяется и в HTML. Тем не менее, мой стиль не работает.

Код в браузере

При попытке обеспечить стилизацию для HTML тегов, он работает. Но когда даешь стили классу, это не работает.

Пожалуйста, помогите. Заранее спасибо.

Answer 1

Ваш css -файл не нацелен на что-либо, поскольку вы пропускаете точки перед именами ваших классов.

.centerTitle {
   text-align: center !important;
}
.formHide {
   display: none !important;
}

Редактировать: Вот хороший обзор различных css -селекторов: https://www.w3schools.com/cssref/css_selectors.asp