React UI Components Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxLayout.
  • jqx-layout - applied to the jqxLayout.
  • jqx-widget - applied to the jqxLayout.
  • jqx-widget-content - applied to the jqxLayout.
  • jqx-rc-all - applied to the jqxLayout.
  • jqx-layout-group-root - applied to the root layout group.
  • jqx-layout-group-default - applied to layout groups.
  • jqx-layout-group-document - applied to document groups.
  • jqx-layout-group-tabbed - applied to tabbed groups.
  • jqx-layout-group-auto-hide - applied to auto hide groups.
  • jqx-layout-group-auto-hide-content-horizontal - applied to the content sections of horizontally-aligned auto hide groups.
  • jqx-layout-group-auto-hide-content-vertical - applied to the content sections of vertically-aligned auto hide groups.
  • jqx-layout-pseudo-window - applied to pseudo-jqxWindows in tabbed and auto hide groups.
  • jqx-layout-pseudo-window-header - applied to pseudo-jqxWindow headers.
  • jqx-layout-pseudo-window-title - applied to pseudo-jqxWindow titles.
  • jqx-layout-pseudo-window-pin-icon - applied to pseudo-jqxWindow pin icons.
  • jqx-layout-pseudo-window-pinned-icon - applied to pseudo-jqxWindow unpin icons.
  • jqx-layout-pseudo-window-close-icon - applied to pseudo-jqxWindow close icons.
  • jqx-layout-pseudo-window-content - applied to pseudo-jqxWindow content sections.
  • jqx-layout-resize-feedback - applied to the horizontal and vertical resize feedbacks.
  • jqx-layout-resize-feedback-horizontal - applied to the horizontal resize feedback.
  • jqx-layout-resize-feedback-vertical - applied to the vertical resize feedback.
  • jqx-layout-resize-feedback-warning - applied to the resize feedbacks when a minimum width has been reached.
When you create a custom style with colors and backgrounds for jqxLayout, you need to do the following:
  • Add the above CSS classes related to jqxLayout
  • After each CSS class, add your theme name.
    For example:
    jqx-layout-energyblue
  • To apply your custom style to jqxLayout, you need to set its 'theme' property (option) to point to your theme name string: