Material-UI Popoverスタイルをオーバーライドする方法は？

Question

Popoverコンポーネントのmax-heightプロパティのデフォルト値を上書きするにはどうすればよいですか？

私はstyle={{'maxHeight': '365px'}}を追加しようとしましたが、何も変更されません：

<Popover 
    style={{'maxHeight': '365px'}} 
    className='notif-popover' 
    open={this.state.notifOpen} 
    anchorEl={this.state.anchorEl} 
    anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} 
    targetOrigin={{horizontal: 'left', vertical: 'top'}} 
    onRequestClose={this.handleRequestClose} 
> 

Answer 1

スタイルを適用する唯一の小道具は、次のとおりです。クラスの className文字列とスタイルを持つstyleオブジェクト。 これらはルート要素（Modalコンポーネント）に適用されることに注意してください。

DocsSourceCode（v1-betaを使用している場合）あなたはMaterialUIがreact-jssからwithStyles HOCを使用し、スタイルがPaperコンポーネント

export const styles = { 
    paper: { 
    position: 'absolute', 
    overflowY: 'auto', 
    overflowX: 'hidden', 
    // So we see the popover when it's empty. 
    // It's most likely on issue on userland. 
    minWidth: 16, 
    minHeight: 16, 
    maxWidth: 'calc(100vw - 32px)', 
    maxHeight: 'calc(100vh - 32px)' 

の対象としていることをソースに見ることができます

const { 
    anchorEl, 
    anchorReference, 
    anchorPosition, 
    anchorOrigin, 
    children, 
    classes, 
    elevation, 
    getContentAnchorEl, 
    marginThreshold, 
    onEnter, 
    onEntering, 
    onEntered, 
    onExit, 
    onExiting, 
    onExited, 
    open, 
    PaperProps, 
    role, 
    transformOrigin, 
    transitionClasses, 
    transitionDuration, 
    ...other 
} = this.props; 

<Modal show={open} BackdropInvisible {...other}> 

残りの小道具は、モーダルコンポーネントに渡されていることをソースに見ることができます

のmaxHeight： - これがバインドされ

'（32PX 100VH）CALC'クラスpaperとなり、クラスpropに渡され、Paperコンポーネントに適用されます。

解決：

Paper成分（検査し、それがクラスを適用する要素に参照）を標的とする、ネストされたセレクタとルート要素にclassNameプロペラを使用。可能なセレクタの

例は

.rootElement > * { max-height: '375px' } 

を（確かに要素を検査し、より良い1使用する必要があります）、その後、あなたはこのCSSオーバーライドが私のために働くようだ<Popover className='rootElement' />

Answer 2

行いたい：

.writeYourOwnClasHere { 
    .MuiPaper-root-6 { 
    padding: 30px; 
    color: pink; 
    } 
} 

Btw、それは信じられないほど駄目なAPIです。