• 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]

VPS Starter Arubacloud
0 głosów
201 wizyt
pytanie zadane 16 lipca 2021 w HTML i CSS przez Oskar Szkurłat Bywalec (2,780 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 2021 przez niezalogowany
wybrane 16 lipca 2021 przez Oskar Szkurłat
komentarz 16 lipca 2021 przez Oskar Szkurłat Bywalec (2,780 p.)
To jest to rozwiązanie co użyłem i nie działa
1
komentarz 16 lipca 2021 przez niezalogowany

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

komentarz 16 lipca 2021 przez Oskar Szkurłat Bywalec (2,780 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 2021 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ź 116 wizyt
pytanie zadane 30 września 2020 w HTML i CSS przez Dzango111 Użytkownik (660 p.)
0 głosów
1 odpowiedź 191 wizyt
pytanie zadane 16 lutego 2018 w HTML i CSS przez hiper007 Stary wyjadacz (11,270 p.)
0 głosów
1 odpowiedź 263 wizyt
pytanie zadane 10 maja 2018 w JavaScript przez hiper007 Stary wyjadacz (11,270 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...