Блог

Я использую react-bootstrap для компонента модального окна в своем коде, и я хотел настроить его с помощью стилизованных компонентов (StyledModalWindow), но по какой-то причине он не работает.

Вот код:

            <StyledModalWindow>
                <Modal show={isOpen} onHide={hideModal}
                       size="lg"
                       aria-labelledby="contained-modal-title-vcenter"
                       centered
                >
                    <Modal.Header>
                        <Modal.Title>Deleting a user</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>Are you sure about this?</Modal.Body>
                    <Modal.Footer>
                        <button onClick={hideModal}>Yes</button>
                        <button>No</button>
                    </Modal.Footer>
                </Modal>
            </StyledModalWindow>
 

Когда я просматриваю элементы в своем браузере, имена классов для этих компонентов — modal-content, modal-header, modal-body и т.д. итак, вот что я пытался использовать в своем стилизованном компоненте:

 import styled from 'styled-components';

export const StyledModalWindow = styled.div`

  amp;.modal-header{
    background-color: red;
  }
`
 

Если кто-нибудь может помочь, я был бы рад!

Модальный компонент react-bootstrap не может быть стилизован таким образом.

Обратите внимание на тот факт, что ваш модальный компонент монтируется в body, а не в div с id=»root», используемым в React. Это означает, что стили StyledModalWindow не переносят класс «.modal-header».

Вместо этого я бы предложил добавить style={{backgroundColor: ‘red’}} непосредственно в модальный компонент.