我无法覆盖 React Bootstrap 组件

Question

我是Web开发的新手，我已经走得很远了，但现在我有点被这个问题困住了。

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

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

奥勒尔

我应该放弃 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

您无法更改 .module 中的引导程序样式.css

我认为发生这种情况是因为反应的渲染。

你必须使用.css或者如果你想使用 .module.css你可以把你的样式交给引导元素。