CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Eduard
Eduard

Reputation: 9205

Material-UI Popover styles are not being applied

I am using Popover from Material-UI in my application:

<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 {
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: absolute;
    max-height: 450px;
    max-width: 700px;
}

The styles are not being applied.

Upvotes: 0

Views: 5131

Answers (1)

Eduard
Eduard

Reputation: 9205

The problem is that with Material-UI, in order to style their Components, we need to use inline-styling only. 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.

Upvotes: 3

Related Questions