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 jqxEditor.- jqx-editor - applied to the editor.
- jqx-editor-inline - applied to the editor when it is in inline mode.
- jqx-editor-inline-focus - applied to the editor when it is focused and in inline mode.
- jqx-widget - applied to the editor.
- jqx-widget-content - applied to the editor's content area.
- jqx-editor-content - applied to the editor's content area.
- jqx-rc-all - applied to the editor. Adds rounded corners to the widget.
- jqx-widget-header - applied to the editor and its toolbar.
- jqx-fill-state-disabled - applied to the editor when it is disabled.
- jqx-editor-window - applied to the editor's dialog windows.
- jqx-editor-toolbar - applied to the editor's toolbar.
- jqx-editor-toolbar-inline - applied to the editor's toolbar when the editor is in inline mode.
- jqx-editor-toolbar-icon - applied to the tool icons.
- jqx-editor-toolbar-item - applied to the tools.
- jqx-editor-toolbar-group - applied to the tool groups.
- jqx-editor-toolbar-button - applied to the tool buttons.
- jqx-editor-color-bar - applied to the color bar of a color picker tool.
- jqx-editor-color-picker - applied to the color picker tool.
- jqx-editor-color-picker-selected-cell - applied to the selected cell of a color picker.
- Add the above CSS classes related to jqxEditor
- After each CSS class, add your theme name.
For example:
jqx-editor-arctic - To apply your custom style to jqxEditor, you need to set its 'theme' property(option) to point to your theme name string.
