我可以使用樣式化組件來定位導入的類來更改 CSS 嗎？

Question

我在我的代碼中將 react-bootstrap 用於模態 window 組件，我想通過使用樣式組件（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>

當我在瀏覽器中檢查元素時，這些組件的 class 名稱是 modal-content、modal-header、modal-body 等。所以這是我嘗試在樣式化組件中使用的內容：

import styled from 'styled-components';

export const StyledModalWindow = styled.div`

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

如果有人可以幫助我會很高興！

Answer 1

react-bootstrap 的模態組件不能以這種方式設置樣式。

請注意，您的 Modal 組件安裝到 body 中，而不是安裝到 React 中使用的 id="root" 的 div 中。 這意味着 StyledModalWindow styles 沒有包裝“.modal-header” class。

相反，我建議將 style={{backgroundColor: 'red'}} 直接添加到 Modal 組件。