我可以使用样式化组件来定位导入的类来更改 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 组件。