[英]Can I target imported classes with Styled Components to change CSS?
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.我在我的代码中将 react-bootstrap 用于模态 window 组件,我想通过使用样式组件(StyledModalWindow)对其进行自定义,但由于某种原因它不起作用。
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:当我在浏览器中检查元素时,这些组件的 class 名称是 modal-content、modal-header、modal-body 等。所以这是我尝试在样式化组件中使用的内容:
import styled from 'styled-components';
export const StyledModalWindow = styled.div`
&.modal-header{
background-color: red;
}
`
If anyone can help I'd be graeful!如果有人可以帮助我会很高兴!
Modal component of react-bootstrap cannot be styled in this way. react-bootstrap 的模态组件不能以这种方式设置样式。
Pay attention to the fact, that your Modal component is mounted into body and not into div with id="root" used in React.请注意,您的 Modal 组件安装到 body 中,而不是安装到 React 中使用的 id="root" 的 div 中。 This means that StyledModalWindow styles are not wrapping ".modal-header" class.这意味着 StyledModalWindow styles 没有包装“.modal-header” class。
Instead, I would propose adding style={{backgroundColor: 'red'}} directly to the Modal component.相反,我建议将 style={{backgroundColor: 'red'}} 直接添加到 Modal 组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.