Я не могу перезаписать компоненты React Bootstrap - PullRequest
Новая
       54

Я не могу перезаписать компоненты React Bootstrap

1 голос
/ 15 января 2020

Я новичок в веб-разработке, и я довольно далеко продвинулся, но теперь я немного застрял в этой проблеме.

Так что в настоящее время я использую реагирование bootstrap для стилизации своей веб-страницы, но я не могу переопределить стили по умолчанию bootstrap. Он работает, когда я использую компоненты стиля, но когда я пытаюсь использовать вместо него css модули, он не воспринимает изменения. Я пытался изменить его в течение нескольких часов, но я не могу заставить его обернуться вокруг моей головы.

Я нашел несколько предложений по использованию s css или пользовательских тем, но я просто запутался, потому что инструкции не Чисто. Может кто-то может помочь указать на документацию о том, как изменить настройку React Bootstrap, и я надеюсь, что это документация для начинающих или видео

ORRRRR

Должен ли я отказаться от реакции 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
}

1 Ответ

0 голосов
/ 15 января 2020

Вы не можете изменить bootstrap стиль в .module. css

Я думаю, это произошло потому, что рендер реагирует.

Вы должны использовать. css или, если хотите используйте .module. css вы можете назначить свои стили элементам bootstrap.

...