我可以使用样式化组件来定位导入的类来更改 CSS 吗？答案

【问题标题】：Can I target imported classes with Styled Components to change CSS?我可以使用样式化组件来定位导入的类来更改 CSS 吗？
【发布时间】：2021-04-22 02:44:52
【问题描述】：

我在代码中将 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`

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

如果有人能帮忙，我会很高兴的！

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

react-bootstrap 的模态组件不能这样设置样式。

请注意，您的 Modal 组件安装到 body 中，而不是安装到 React 中使用的 id="root" 的 div 中。这意味着 StyledModalWindow 样式没有包装“.modal-header”类。

相反，我建议将 style={{backgroundColor: 'red'}} 直接添加到 Modal 组件中。

【讨论】：