Custom CSS is not getting applied in .Net Core React App

Question

I am using Reactstrap and trying to add some custom CSS, but the custom CSS is not getting applied.

Here is the code snippet.

Below is 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>
        );
    }
}

Below is Home.css file

centerTitle {
    text-align: center !important;
}

formHide {
    display: none !important;
}

I tried debugging using developer Tools, this is the code, I am able to see. My Style is there and it is applied correctly in HTML as well. Still, my style is not working.

Code in Browser

When trying to provide styling to HTML Tags, it is working. But when giving styles to class, it is not working.

Please help. Thanks in Advance.

Answer 1

Your css-file is not targeting anything, since you are missing the dots infront of your classnames.

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

Edit: Here is a good overview of the different css-selectors: https://www.w3schools.com/cssref/css_selectors.asp