Top
MessageWindow - Styling & Theming
MessageWindow
To style and customize the appearance of <MessageWindow />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a <MessageWindow /> className - note that this will not override the default <MessageWindow /> className of zippy-react-toolkit-message-window, but rather will be appended to the classes the component already has.
Below you can find a list with all the css classes applied to<MessageWindow /> and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-message-window
This is the block className for all <MessageWindow />. Always applied.
zippy-react-toolkit-message-window--buttons-align-[ALIGN]
Applied with the value of the buttonsAlign prop.
zippy-react-toolkit-message-window__icon
ClassName for the window's icon.
zippy-react-toolkit-message-window__title-bar
ClassName for the window's title bar.
zippy-react-toolkit-message-window__title
ClassName for the window's title.
zippy-react-toolkit-message-window__body
ClassName for the window's body.
zippy-react-toolkit-message-window__footer
ClassName for the window's footer.
zippy-react-toolkit-message-window__button
ClassName for the window's buttons.
zippy-react-toolkit-message-window__button--ok
ClassName for the window's OK button.
zippy-react-toolkit-message-window__button--cancel
ClassName for the window's Cancel button.
zippy-react-toolkit-message-window__button--yes
ClassName for the window's Yes button.
zippy-react-toolkit-message-window__button--no
ClassName for the window's No button.