ZK 元件的配色与设计都有经过设计师制定，但我想你仍有你自己特定的需要，当有需要改变元件外观时，有几种做法：

Style

每个元件都支援这个属性，直接把 CSS rule 写上来覆盖预设属性，用来客制某个特定元件。

<button style="font-size: 20px" label="大字体"/>

Sclass

每个元件都支援这个属性，可让你外加 css class 到元件上。例如我可以引入 bootstrap css 并套用它提供的 button css，就可以产生同样的效果：

这主要是用来套用既有设计的 CSS class，并小幅修改元件既有外观：

<button sclass="btn-primary" label="primary"/>
<button sclass="btn-success" label="success"/>
<button sclass="btn-warning" label="warning"/>

Zclass

这个属性除了让你加上你额外的 CSS class 外，同时把元件内建的 class 移除，等於是完全套用你自订的外观，如果你想要完全自订外观不想被元件内建样式影响，就要使用这个属性。

<button zclass="btn btn-outline-danger btn-block" label="danger"/>

如果你打开 developer tool 观察，比较两个有画线的 class 内容

你就会发现最下面那个按钮的 class 中，z-button 已被移除。

但对於结构比较复杂的元件，你需要提供多个相关 CSS class，因为元件每个部位都有独立的 css class 来决定外观。例如一个 <window> 预设的 DOM 结构如下：

<div id="a4DT6" class="z-window z-window-embedded">
    <div id="a4DT6-cap" class="z-window-header">my window
        <div id="a4DT6-icons" class="z-window-icons"></div>
    </div>
    <div id="a4DT6-cave" class="z-window-content"></div>
</div>

你可以注意到这个元件由数个 <div> 组成，每个都有其 css class，都以 z-window 为前缀。

如果我指定 zclass 为 dialog：

<window title="my custom window" zclass="dialog" border="normal">
</window>

那 dialog 就变成元件 css 的前缀取代内建的 z-window，而产生的 DOM 就变成：

<div id="a4DT7" class="dialog dialog-embedded">
    <div id="a4DT7-cap" class="dialog-header">my custom window
        <div id="a4DT7-icons" class="dialog-icons"></div>
    </div>
    <div id="a4DT7-cave" class="dialog-content"></div>
</div>

因此你会需要提供 dialog, dialog-embedded, dialog-header, dialog-icons, dialog-content这些 class。

覆写所有元件

如果要一次调整所有同类型的元件，则可以覆写元件内建 CSS class。

例如我想要把 <groupbox> 内的所有 <checkbox> 文字都调大、变色：

内建元件的 css 可从 developer tool > Elements 页，并检视 DOM element 来得知：

在了解其结构後，就可以覆写内建 class:

<style>
    .z-groupbox .z-checkbox-content{
        font-size: 30px;
        color: skyblue;
    }
</style>
<groupbox title="绝地武士">
    <checkbox label="天行者路克"/>
    <checkbox label="欧比王"/>
    <checkbox label="尤达"/>
</groupbox>

完整说明请看 ZK Style Customization Guide

客制化整套布景主题

ZK 元件并不是个别设计外观，而是整体符合一套布景主题（theme）来设计，有一致的颜色、字型、留白等。如果你要改变整体设计，一个一个覆写未免也太麻烦，因此 ZK 提供一个范本专案，让你基於预设布景主题来建构一个客制化布景主题。你会需要先学 LESS 语法。

这个范本专案在 Github 公开储存库 zkThemeTemplate。

用法简述

1. fork 该储存库
2. 执行初始化指令(请看 readme.md)
   需要为 theme取名，如 jedi
3. 新建一个档名以“_”开头的 less 档
   如 _custom.less
4. 在该新档中覆写预设的变数或 css rule
5. 将新档汇入 _header.less
   顺序要在最後才能覆写前面的预设内容
6. 建构 jar 档
   mvn clean package
   会将 less 编译成 *.css.dsp 并包装成一个 jar，如 jedi.jar
7. 将产生的 jar 放入你程序的 classpath 中
8. 在 zk.xml 中指定使用该 theme

建议用新档放客制化内容而不是直接修改 ZK 内建 less 的原因是：易於升级维护。用 git 的好处就是可以透过 git 比较档案的差异与合并，如果你直接改在内建 less，未来若是 zkThemeTemplate 修 bug或升级，你就可以轻易合并修改的内容到你的 forked repository而不会产生编辑冲突。

preview程序

zkThemeTemplate 内含一个小网页程序，让你便於预览你客制化的成果，而不须每次都安装到你目标专案上。它也会自动侦测 less 变更并重载，因此你可以边改边看。

详细的细节与指令就都请看 zkThemeTemplate/readme.md

未来学习方向

有些主题受限於时间、篇幅无法放在这30 篇中，但我想也是多数人会有兴趣，我就列在下面，读者可自行取用，未来若是有机会再写：

• 处理键盘事件
  可让你为使用者实作快速键功能
• 错误处理机制
  提到 ajax 呼叫倾听器後若是发生exception，该怎麽处理？
• 效能调校
• ZK 整合 Spring Boot 起步
• MVVM 起步
  虽然 MVVM 要学习有关 data binding 的观念，但其仍属於同一框架，本系列文章的大部分观念仍然对 MVVM 有帮助。

後记

30天每天发一篇还真不是件容易的事，几乎用去我所有空闲时间，但能为自己的职业生涯留下一个小小的里程碑，甚感欣喜。感谢上帝保守这过程，感谢妻子的支持、鼓励、提醒，感谢同事们提供的范例与主管的支持，也谢谢各位所有看到最後的读者们。