[英]Material-UI Popover styles are not being applied
I am using Popover from Material-UI in my application: 我在应用程序中使用Material-UI中的Popover :
<Popover
anchorEl={AnchorElement}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
open={props.isVisible}
className='popover'
targetOrigin={{ vertical: 'top', horizontal: 'left' }}
onRequestClose={() => false}
useLayerForClickAway={false}
>
and the problem is that even though I style the Popover in my popover.css: 问题是即使我在popover.css中设置Popover的样式,也是如此:
.popover {
display: flex;
flex-direction: column;
padding: 20px;
position: absolute;
max-height: 450px;
max-width: 700px;
}
The styles are not being applied. 没有应用样式。
The problem is that with Material-UI, in order to style their Components, we need to use inline-styling only . 问题是,与材料的UI,以自己的风格的组件,我们需要使用内联样式而已 。 So, to remedy the issue, this is how the render should look like:
因此,要解决此问题,渲染器应如下所示:
<Popover
anchorEl={AnchorElement}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
open={props.isVisible}
className='popover'
targetOrigin={{ vertical: 'top', horizontal: 'left' }}
onRequestClose={() => false}
useLayerForClickAway={false}
style={{
display: 'flex',
flexDirection: 'column',
padding: '20px',
position: 'absolute',
maxHeight: '450px',
maxWidth: '700px'
}}
>
And styles inside .css either don't have any effect or simply cause unexpected behavior. .css中的样式没有任何作用,或者只是引起了意外的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.