Question

我在我的应用程序中使用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;
}

未应用样式。

Answer 1

问题在于，使用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中的样式要么没有任何效果，要么只会导致意外行为。

未应用Material-UI Popover样式

1 个答案: