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.