Блог

Главная - Вопросы по программированию - react-bootstrap не выполняет рендеринг должным образом

react-bootstrap не выполняет рендеринг должным образом

#reactjs #react-bootstrap

Вопрос:

Я отрисовываю модальный компонент, и я получаю это обратно: изображение

почему кнопка xClose выглядит так?

Вот мой модальный компонент :

 import { Button, Modal } from 'react-bootstrap'

const TodoPopup = (props : {show : boolean, onHide : () => void} ) => {
    return (
        <Modal
      {...props}
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          This is a modal example
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
    );
};

export default TodoPopup;

Я скопировал и вставил из документации здесь: документация react-bootstrap

сгенерированные интервалы внутри класса close button

Комментарии:

1. Возможно, вам не хватает CSS ?

2. Я добавил импорт, но результаты все те же

3. любая помощь, пожалуйста?

4. Я только что попытался использовать пример с кнопкой, чтобы открыть модальный файл из документации, и я не могу воспроизвести проблему. Можете ли вы проверить кнопку «X» в своем браузере и посмотреть, имеет ли .btn-close класс правильные свойства CSS ?

5. Я заметил, что внутри моего класса .btn-close он делает 2 дочерних тега span, которые я их не создавал. и мне не хватает CSS класса .btn-close, возможно, это проблемный фактор. Добавление изображения из 2 сгенерированных промежутков

Ответ №1:

Исправлено, я понизил свою версию начальной загрузки, чтобы она соответствовала моей версии react-bootstrap.

Комментарии:

1. Вы не должны давать ответ на свой вопрос с комментарием такого типа, пожалуйста, удалите его и закройте свой вопрос

Метки: