我无法覆盖 React Bootstrap 组件答案

【问题标题】：I can't overwrite React Bootstrap components我无法覆盖 React Bootstrap 组件
【发布时间】：2020-05-01 22:02:43
【问题描述】：

我是 web 开发的新手，我已经走了很远，但现在我有点卡在这个问题上。

所以我目前正在使用 react bootstrap 来设置我的网页样式，但我无法覆盖引导程序的默认样式。当我使用样式组件时它可以工作，但是当我尝试使用 css 模块时，它不会接受更改。几个小时以来一直在尝试更改它，但我无法让它缠绕在我的头上。

我确实找到了一些使用 scss 或自定义主题的建议，但我只是感到困惑，因为说明不清楚。有人可以帮助指出有关如何更改自定义 React Bootstrap 的文档，我希望它是一个适合初学者的文档或视频

ORRRRR

我是否应该放弃 react bootstrap 而只在我的项目中使用 bootstrap ????

所以这是一个使用样式化组件的示例：

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
}
`

但是当我尝试使用 css 模块时，它不再接受更改。如在文本中变为默认灰色而不是白色

组件：

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 文件：

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

div .footer .row {
    color: white
}

【问题讨论】：

标签： javascript reactjs react-bootstrap react-css-modules

【解决方案1】：

你不能在 .module.css 中改变引导样式

我认为这是因为 react 的渲染而发生的。

你必须使用 .css 或者如果你想使用 .module.css 你可以将你的样式赋予引导元素。

【讨论】：