I can't overwrite React Bootstrap components

Question

I'm new to web development and I have gotten quite far, but now I'm a little bit stuck on this problem.

So I am currently using react bootstrap to style my webpage, but I am not able to override the default styles of the bootstrap. It works when I used style components but when I try to use css modules instead, it doesnt pick up the changes. Been trying to change it for a few hours now but I cant get it to wrap around my head.

I did find some suggestions to use scss or custom themes but I just get confused because instructions are not clear. Can someone maybe help point to documentation on how to change customize React Bootstrap, and I hope its a beginner friendly documentation or video

ORRRRR

Should I give up on react bootstrap and just use bootstrap in my projects instead 🤣

So this is an example with styled components that worked:

import React from 'react'
import Jumbotron from 'react-bootstrap/Jumbotron'
import { Container, Row, Col} from 'react-bootstrap'
import styled from 'styled-components'

const Footer =() => 
     (
        <FooterContainer>
            <Jumbotron fluid className="footer">
            <Container fluid>
            <Row noGutters>
                <Col>Links</Col>
                <Col xs={6}>Links</Col>
                <Col>Copyright Kimi 2020</Col>
            </Row>
            </Container>
            </Jumbotron>
        </FooterContainer>
    )

export default Footer;

const FooterContainer = styled.div `
.footer {
    margin: 0px;
    padding : 1.5rem;
    background-color: black;
}

.footer .row {
    color: white
}
`

But when I try to use css modules, it doesnt pick up the changes anymore. as in the text becomes defauly grey instead of white

Component:

import React from 'react'
import Jumbotron from 'react-bootstrap/Jumbotron'
import { Container, Row, Col} from 'react-bootstrap'
import classes from './ComponentsStyle/Footer.module.css'

const Footer =() => 
     (
        <div>
            <Jumbotron fluid className={classes.footer}>
            <Container fluid>
            <Row noGutters>
                <Col>Links</Col>
                <Col xs={6}>Links</Col>
                <Col>Copyright Kimi 2020</Col>
            </Row>
            </Container>
            </Jumbotron>
        </div>
    )

export default Footer;

CSS file:

div .footer {
    margin: 0px;
    padding : 1.5rem;
    background-color: black;
}

div .footer .row {
    color: white
}

Answer 1

you cant change bootstrap style in .module.css

i think this happened because render of react .

you have to use .css or if you want use .module.css you can give your styles to bootstrap elements.