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.

user9637278 · Accepted Answer · 2020-05-03 13:25:29Z

2

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

answered May 3, 2020 at 13:25

user9637278

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related