我正在向我的应用程序中添加彩色主题（轻/深色模式），但是，该样式不会影响我的模态，该模态是使用React-ModaL构建的。我使用的是数据属性和CSS变量在主题之间切换，并在div中使用类名称应用程序进行切换。问题在于，包含模态的React Portal是root div的同级元素，即是parent div到app。因此，模态仅从：root而不是[data-theme ='dark']数据属性继承CSS变量。这个问题的最佳解决方法是什么？我已经想到了以下可能的解决方案：
- 扩展数据属性的范围，使其位于身体，因此包含了React Portal。
- 通过JavaScript设置React模态的颜色，并从其他元素中获取适当的颜色。
- 重新设计我实施不同主题的方式（由于对我的应用程序的所有其他部分有效，最不利的解决方案）
的屏幕截图：
模态启用
CSS：
:root {
--color-background: #F8F0E3;
--color-background-secondary: #E3EBF8;
--color-background-third: #E3EBF8;
--color-text: #000000;
--color-text-alternate: #757575;
--theme-color-strong: #FFFFFF;
--color-background-highlight: #6F7378;
--color-background-opaque: rgba(248, 240, 227, 0.75);
--color-link: #0000EE;
--color-button: #FFFFFF;
--okay-color: #F9E076;
}
[data-theme='dark'] {
--color-background: #121212;
--color-background-secondary: #181818;
--color-background-third: #caced3;
--color-text: #FFFFFF;
--color-text-alternate: #FFFFFF;
--theme-color-strong: #000000;
--color-background-highlight: #e6e6e6;
--color-link: #A5C9FF;
--color-button: #121212;
--okay-color: #d3c404;
}
.rating-modal{
top: 40px;
bottom: 40px;
border: 1px solid #ccc;
background-color: var(--color-background);
overflow: auto;
border-radius: 4px;
outline: none;
padding: 20px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 80%;
}
I'm adding color themes (light/dark mode) to my application however, the styling does not affect my modal, built using react-modal. I am using data attributes and CSS variables to switch between themes, with the attribute within a div with class name App. The issue is that the React Portal that contains the Modal is a sibling element to the root div, which is the parent div to App. Thus, the Modal only inherits the CSS variables from :root and not from the [data-theme='dark'] data attribute. What would be the best workaround to this issue? I've thought of the following possible solutions:
- Expanding the scope of the data attributes so that it lies in body, therefore encompassing the React Portal.
- Setting the colors for the React Modal through JavaScript and getting the proper colors from other elements.
- Reworking the way I am implementing different themes (least favorable solution as it works for all other parts of my application)
Screenshots of DOM:
Modal closed
Modal open
CSS:
:root {
--color-background: #F8F0E3;
--color-background-secondary: #E3EBF8;
--color-background-third: #E3EBF8;
--color-text: #000000;
--color-text-alternate: #757575;
--theme-color-strong: #FFFFFF;
--color-background-highlight: #6F7378;
--color-background-opaque: rgba(248, 240, 227, 0.75);
--color-link: #0000EE;
--color-button: #FFFFFF;
--okay-color: #F9E076;
}
[data-theme='dark'] {
--color-background: #121212;
--color-background-secondary: #181818;
--color-background-third: #caced3;
--color-text: #FFFFFF;
--color-text-alternate: #FFFFFF;
--theme-color-strong: #000000;
--color-background-highlight: #e6e6e6;
--color-link: #A5C9FF;
--color-button: #121212;
--okay-color: #d3c404;
}
.rating-modal{
top: 40px;
bottom: 40px;
border: 1px solid #ccc;
background-color: var(--color-background);
overflow: auto;
border-radius: 4px;
outline: none;
padding: 20px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 80%;
}
发布评论
评论（1）
使用CSS同级选择器，您可以定位并将CSS应用于模态门户。
喜欢
，您现在可以针对ReactModalportal Div的孩子如下
Using the CSS sibling selector, you can target and apply CSS to your modal portals.
Like
And you can now target children of the ReactModalPortal div as follows