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