我正在使用Popover from Material-UI在我的应用程序中:
<Popover
anchorEl={AnchorElement}
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
open={props.isVisible}
className='popover'
targetOrigin={{ vertical: 'top', horizontal: 'left' }}
onRequestClose={() => false}
useLayerForClickAway={false}
>
问题是,即使我在 popover.css 中设置了 Popover 的样式:
.popover {
display: flex;
flex-direction: column;
padding: 20px;
position: absolute;
max-height: 450px;
max-width: 700px;
}
未应用样式。
最佳答案
问题是,对于 Material-UI,为了设置其组件的样式,我们需要仅使用内联样式。因此,为了解决这个问题,渲染应该是这样的:
<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'
}}
>
.css 中的样式要么没有任何效果,要么只是导致意外行为。
关于javascript - 未应用 Material-UI Popover 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48458632/