• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nadpisanie CSS w komponencie [React/Bootstrap]

Fiszki IT
Fiszki IT
0 głosów
62 wizyt
pytanie zadane 16 lipca w HTML i CSS przez Oskar Szkurłat Bywalec (2,030 p.)

Cześć, mam takie pytanie: piszę apkę w oparciu o React i korzystam z Reactstrap. Zrobiłem popover po najechaniu na ikonkę. Popover się pojawia poprawnie, jednak problem tkwi w jego formatowaniu stylu, mogę ustawić szerokość PopoverBody, a samego Popover już nie, co brzydko wygląda (na poniższej ilustracji widać). Tak więc pytanie, co mogę zrobić, żeby móc nadpisać styl samego okienka Popover? Wiem, że to domyślny styl bootstrapa, z którego korzysta reactstrap jest raczej problemem, ale nawet !important nie pozwala mi na nadpisanie wielkości, chociaż, jak zrobiłem w .info {display: none !important;} to zareagowało ;(.

import styles from './Info.module.css'
import { PopoverBody, Popover, Card, CardBody, Row, Col } from 'reactstrap'


       <div id='hover' onMouseOver={showInfo} onMouseOut={hideInfo}>
               <img src={infoIcon} alt="info icon" />
      </div>

      <Popover
        className={styles.info}
        placement='bottom'
        isOpen={popover}
        target='hover'
      >
        <PopoverBody className={styles.bodyCointainer}>
          <Card >
            <CardBody>
              <Row><h3>Tytul </h3><hr /></Row>
              Dane ....
            </CardBody>
          </Card>
        </PopoverBody>
      </Popover>
.bodyCointainer {
    width: 1000px !important;
}
.info .popover{
    width: 1000px !important;
    max-width: 1000px !important;
}

Z góry dzięki.

1 odpowiedź

+1 głos
odpowiedź 16 lipca przez niezalogowany
wybrane 16 lipca przez Oskar Szkurłat
komentarz 16 lipca przez Oskar Szkurłat Bywalec (2,030 p.)
To jest to rozwiązanie co użyłem i nie działa
1
komentarz 16 lipca przez niezalogowany

może umieść rozwiązanie w pliku global.css ? wink zamiast w Info.module.css

komentarz 16 lipca przez Oskar Szkurłat Bywalec (2,030 p.)

Oho, przedtem próbowałem w głównym css, ale nie działało, ale wydaje mi się, że mogłem wtedy zapomnieć o !important... xd 

Tak więc działa, do nadpisu componenetów z reacta trzeba używać !important i nie działać w modułach ;). No i zmieniłem teraz na ogólny parametr popoverów i śmiga, jak marzenie.

.popover{
  max-width: 100% !important;
}

Dzięki wielkie za naprostowanie.

1
komentarz 16 lipca przez niezalogowany

Co dwie głowy to nie jedna Proszę Pana ! laugh

3 maj się i niech moc Niezależnego myślenia i żyłka rewolucjonisty będzie z Tobą! devil

Podobne pytania

0 głosów
1 odpowiedź 47 wizyt
pytanie zadane 30 września 2020 w HTML i CSS przez Dzango111 Początkujący (400 p.)
0 głosów
1 odpowiedź 119 wizyt
pytanie zadane 16 lutego 2018 w HTML i CSS przez hiper007 Stary wyjadacz (11,260 p.)
0 głosów
1 odpowiedź 132 wizyt
pytanie zadane 10 maja 2018 w JavaScript przez hiper007 Stary wyjadacz (11,260 p.)
Porady nie od parady
Forum posiada swój własny serwer Discord, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

84,736 zapytań

133,542 odpowiedzi

295,952 komentarzy

56,001 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...