Appearance

The Popup enables you to style its host element and the elements that hold its content.

To style the host element, decorate the component element. To style the element which holds the Popup content, use the popupClass property.

<style>
  .wrapper {
      color: #ffffff;
      background-color: #eeeeee;
    }

    .inner-wrapper {
        padding: 20px;
        background-color: #fcfcfc;
    }
</style>
class AppComponent extends React.Component {
    anchor = null;
    constructor(props) {
        super(props);
        this.state = { show: false };
    }

    render() {
        return (
            <div>
                <button
                    onClick={this.onClick}
                    ref={(button) => {
                        this.anchor = button;
                    }}
                    className={'k-button'}
                >
                    {this.state.show ? 'Hide' : 'Show'}
                </button>
                <Popup
                    anchor={this.anchor}
                    show={this.state.show}
                    className={'wrapper'}
                    popupClass={'inner-wrapper'}
                >
                    Popup content.
                </Popup>
            </div>
        );
    }

    onClick = () => {
        this.setState({ show: !this.state.show });
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

In this article

 /