Can I target imported classes with Styled Components to change CSS?

Question

I'm using react-bootstrap for modal window component in my code, and I wanted to customize it by using styled components (StyledModalWindow) but for some reason it's not working.

Here's the code:

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

When I inspect elements in my browser the class names for these components are modal-content, modal-header, modal-body etc. so here's what I tried to use in my Styled Component:

import styled from 'styled-components';

export const StyledModalWindow = styled.div`

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

If anyone can help I'd be graeful!

Answer 1

Modal component of react-bootstrap cannot be styled in this way.

Pay attention to the fact, that your Modal component is mounted into body and not into div with id="root" used in React. This means that StyledModalWindow styles are not wrapping ".modal-header" class.

Instead, I would propose adding style={{backgroundColor: 'red'}} directly to the Modal component.