(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{600:function(n,s,a){"use strict";a.r(s),a.d(s,"default",function(){return C});var e=a(23),t=a.n(e),p=a(24),o=a.n(p),c=a(25),r=a.n(c),l=a(26),u=a.n(l),i=a(32),k=a.n(i),h=a(27),d=a.n(h),m=a(28),f=a.n(m),y=a(580),g=a.n(y),x=a(0),b=a.n(x),z=a(111);function v(n){return b.a.createElement(n.tag,g()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function S(n){return b.a.createElement(v,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function w(n){return b.a.createElement(v,{tag:"style",html:n.style})}x.Component;var C=function(n){function s(){return t()(this,s),r()(this,u()(s).apply(this,arguments))}return d()(s,n),o()(s,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&Object(z.a)(document.documentElement,0,function n(s,a){for(;s;)return s.offsetTop&&"static"!==getComputedStyle(s).position&&(a+=s.offsetTop),n(s.parentNode,a);return a}(s,-9))}}},{key:"render",value:function(){return b.a.createElement("div",{className:"zandoc-react-container",key:null},b.a.createElement(w,{style:'img[alt="zent-theme"] {\n width: 514px;\n height: 319px;\n }'}),b.a.createElement(S,{html:'

定制主题

\n

Zent 支持主题定制，目前仅支持组件库颜色的定制。

\n

zent-theme

\n

使用 CSS Variables

\n

Zent 使用CSS Variables定制主题色，对于不支持 CSS Variables 的浏览器，会降级到默认主题色，可以通过重新构建 SCSS 定制主题色。

\n

主题色示例（默认主题色）：

\n
:root {\n  --theme-stroke-1: #323233;\n  --theme-stroke-2: #646566;\n  --theme-stroke-3: #969799;\n  --theme-stroke-4: #c8c9cc;\n  --theme-stroke-5: #dcdee0;\n  --theme-stroke-6: #ebedf0;\n  --theme-stroke-7: #f2f3f5;\n  --theme-stroke-8: #f7f8fa;\n  --theme-stroke-9: #fff;\n  --theme-stroke-10: #eaeaea;\n  --theme-stroke-11: #f4f5f5;\n  --theme-primary-1: #0a2a61;\n  --theme-primary-2: #10439b;\n  --theme-primary-3: #114db4;\n  --theme-primary-4: #155bd4;\n  --theme-primary-5: #3773da;\n  --theme-primary-6: #5487df;\n  --theme-primary-7: #94b4eb;\n  --theme-primary-8: #edf4ff;\n  --theme-success-1: #268d37;\n  --theme-success-2: #2da641;\n  --theme-success-3: #4cb35d;\n  --theme-success-4: #66be74;\n  --theme-success-5: #f0faf2;\n  --theme-error-1: #b40000;\n  --theme-error-2: #d40000;\n  --theme-error-3: #da2626;\n  --theme-error-4: #df4545;\n  --theme-error-5: #ffebeb;\n  --theme-warn-1: #ed6a0c;\n  --theme-warn-2: #f1924e;\n  --theme-warn-3: #fff5ed;\n}
\n

重新构建 SCSS 定制主题色

\n

Zent 的样式使用 scss 开发，我们提供了一个预定义的扩展文件来支持主题定制，通过在 Zent 仓库中修改配置，生成一份定制的 css 样式。

\n

这种方式对业务项目是非侵入式的，样式的定制和业务项目完全独立；但也有一个问题，就是每次更新 Zent 组件库都要重新生成一份定制主题。

\n

定制方法

\n
    \n
  1. 克隆 Zent 源码并安装依赖
    2. \n
  2. 在 packages/zent/assets/theme 目录下找到一个名为 _override.scss 的文件，这个文件是预留用来覆盖默认主题变量的，所有主题变量可以在同目录的 _default.scss 文件内找到
    3. \n
  3. 在 packages/zent 目录下面执行 yarn theme
    4. \n
  4. 定制的主题样式文件会生成在 packages/zent/css 目录下
    5. \n
'}))}}]),s}(x.Component)}}]);