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