Top
Theming components - Theming
Theming components
After installing the toolkit, you are ready to use the all components in your project. Most probably for your frontend project, you are already using a bundler like webpack, rollup, browserify. In this case, all you need to do is import the javascript & the css sources in your app:
When you import @zippytech/react-toolkit/Button/index.css file, you import all the structural styles & the default theme for the <Button /> component.
Using import '@zippytech/react-toolkit/CMP_NAME/index.css' imports both the structural styles & the default theme of the specified component.
If you only want to import the structural styles for a component, you can do so by importing @zippytech/react-toolkit/CMP_NAME/base.css. This will only load the structural css rules for your component to work as expected, but without any theming included.
At the moment, @zippytech/react-toolkit ships with only one theme, the "default" theme.
You can specify your <Button /> theme explicitly via the theme prop. Every toolkit component supports this prop, with the default value being 'default' - which means that the component is rendered with the default theme.
The index.css file of each component, contains both the structural styles and the default theme.
Additionally, the default theme is contained in the @zippytech/react-toolkit/CMP_NAME/theme/default.css file.
import Button from '@zippytech/react-toolkit/Button'

// import the structural styles
import '@zippytech/react-toolkit/Button/base.css'

// and the default theme
import '@zippytech/react-toolkit/Button/theme/default.css'
This gives you very granular control over what styles you want to use and import.
As a recap, importing @zippytech/react-toolkit/Button/index.css is equivalent to importing @zippytech/react-toolkit/Button/base.css and @zippytech/react-toolkit/Button/theme/default.css.
We're using the BEM methodology for styling components and assigning css classes to them.
Every component has a block className, which is prefixed with 'zippy-react-toolkit-'. For example, the Button component has a block className of zippy-react-toolkit-button.
Specifying the theme via the theme prop (which defaults to 'default'), adds a modifier className (--theme-THEME_NAME), so for a <ComboBox />, it adds the className of zippy-react-toolkit-combo-box--theme-default).
The following snippet
<ComboBox theme="green-800" />
will render the ComboBox DOM node with both zippy-toolkit-react-combo-box and zippy-toolkit-react-combo-box--theme-green-800 css classNames.
ComponentBlock className
Accordion"zippy-react-toolkit-accordion"
Button"zippy-react-toolkit-button"
ButtonGroup"zippy-react-toolkit-button-group"
CheckBox"zippy-react-toolkit-checkbox"
ColorPicker"zippy-react-toolkit-color-picker"
ComboBox"zippy-react-toolkit-combo-box"
DataGrid"zippy-react-datagrid"
DatePicker"zippy-react-toolkit-date-picker"
DropdownButton"zippy-react-toolkit-dropdown-button"
LoadMask"zippy-react-toolkit-load-mask"
MaskedInput"zippy-react-toolkit-masked-input"
Menu"zippy-react-toolkit-menu"
MenuBar"zippy-react-toolkit-menu-bar"
MessageWindow"zippy-react-toolkit-message-window"
Notification"zippy-react-toolkit-notification"
NumericInput"zippy-react-toolkit-numeric-input"
Panel"zippy-react-toolkit-panel"
ProgressBar"zippy-react-toolkit-progress-bar"
RadioButtonGroup"zippy-react-toolkit-radio-button-group"
Scheduler"zippyui-scheduler"
Slider"zippy-react-toolkit-slider"
SplitButton"zippy-react-toolkit-split-button"
SplitContainer"zippy-react-toolkit-split-container"
TabPanel"zippy-react-toolkit-tab-panel"
ToolBar"zippy-react-toolkit-tool-bar"
Tootip"zippy-react-toolkit-tooltip"
TreeView"zippy-react-toolkit-tree-view"
Uploader"zippy-react-uploader"
Window "zippy-react-toolkit-window"