我无法覆盖 React Bootstrap 组件

Question

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

所以我目前正在使用 React bootstrap 来设置我的网页样式，但我无法覆盖 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
}

Answer 1

您无法更改 bootstrap 中的样式。module.css

我认为这是因为 react 的渲染。

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

我无法覆盖 React Bootstrap 组件

I can't overwrite React Bootstrap components

javascript

reactjs

react-bootstrap

react-css-modules