javascript - 未应用 Material-UI Popover 样式

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 中的样式要么没有任何效果，要么只是导致意外行为。