17-bc4eac5649ec72ccd951.js

(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:'<h2 class="anchor-heading"><a href="#ding-zhi-zhu-ti">¶</a><a href="javascript:void(0)" id="ding-zhi-zhu-ti" class="anchor-point"></a>定制主题</h2>\n<p>Zent 支持主题定制，目前仅支持组件库颜色的定制。</p>\n<p><img src="https://img.yzcdn.cn/zanui/react/zent-theme.png" alt="zent-theme"></p>\n<h3 class="anchor-heading"><a href="#shi-yong-css-variables">¶</a><a href="javascript:void(0)" id="shi-yong-css-variables" class="anchor-point"></a>使用 CSS Variables</h3>\n<p>Zent 使用CSS Variables定制主题色，对于不支持 CSS Variables 的浏览器，会降级到默认主题色，可以通过重新构建 SCSS 定制主题色。</p>\n<p>主题色示例（默认主题色）：</p>\n<pre><code class="language-css"><span class="token selector"><span class="token pseudo-class">:root</span> </span><span class="token punctuation">{</span>\n  <span class="token property">--theme-stroke-1</span><span class="token punctuation">:</span> <span class="token hexcode">#323233</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-2</span><span class="token punctuation">:</span> <span class="token hexcode">#646566</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-3</span><span class="token punctuation">:</span> <span class="token hexcode">#969799</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-4</span><span class="token punctuation">:</span> <span class="token hexcode">#c8c9cc</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-5</span><span class="token punctuation">:</span> <span class="token hexcode">#dcdee0</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-6</span><span class="token punctuation">:</span> <span class="token hexcode">#ebedf0</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-7</span><span class="token punctuation">:</span> <span class="token hexcode">#f2f3f5</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-8</span><span class="token punctuation">:</span> <span class="token hexcode">#f7f8fa</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-9</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-10</span><span class="token punctuation">:</span> <span class="token hexcode">#eaeaea</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-stroke-11</span><span class="token punctuation">:</span> <span class="token hexcode">#f4f5f5</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-primary-1</span><span class="token punctuation">:</span> <span class="token hexcode">#0a2a61</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-primary-2</span><span class="token punctuation">:</span> <span class="token hexcode">#10439b</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-primary-3</span><span class="token punctuation">:</span> <span class="token hexcode">#114db4</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-primary-4</span><span class="token punctuation">:</span> <span class="token hexcode">#155bd4</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-primary-5</span><span class="token punctuation">:</span> <span class="token hexcode">#3773da</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-primary-6</span><span class="token punctuation">:</span> <span class="token hexcode">#5487df</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-primary-7</span><span class="token punctuation">:</span> <span class="token hexcode">#94b4eb</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-primary-8</span><span class="token punctuation">:</span> <span class="token hexcode">#edf4ff</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-success-1</span><span class="token punctuation">:</span> <span class="token hexcode">#268d37</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-success-2</span><span class="token punctuation">:</span> <span class="token hexcode">#2da641</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-success-3</span><span class="token punctuation">:</span> <span class="token hexcode">#4cb35d</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-success-4</span><span class="token punctuation">:</span> <span class="token hexcode">#66be74</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-success-5</span><span class="token punctuation">:</span> <span class="token hexcode">#f0faf2</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-error-1</span><span class="token punctuation">:</span> <span class="token hexcode">#b40000</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-error-2</span><span class="token punctuation">:</span> <span class="token hexcode">#d40000</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-error-3</span><span class="token punctuation">:</span> <span class="token hexcode">#da2626</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-error-4</span><span class="token punctuation">:</span> <span class="token hexcode">#df4545</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-error-5</span><span class="token punctuation">:</span> <span class="token hexcode">#ffebeb</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-warn-1</span><span class="token punctuation">:</span> <span class="token hexcode">#ed6a0c</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-warn-2</span><span class="token punctuation">:</span> <span class="token hexcode">#f1924e</span><span class="token punctuation">;</span>\n  <span class="token property">--theme-warn-3</span><span class="token punctuation">:</span> <span class="token hexcode">#fff5ed</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n<h3 class="anchor-heading"><a href="#chong-xin-gou-jian-scss-ding-zhi-zhu-ti-se">¶</a><a href="javascript:void(0)" id="chong-xin-gou-jian-scss-ding-zhi-zhu-ti-se" class="anchor-point"></a>重新构建 SCSS 定制主题色</h3>\n<p>Zent 的样式使用 <a href="https://sass-lang.com">scss</a> 开发，我们提供了一个预定义的扩展文件来支持主题定制，通过在 Zent 仓库中修改配置，生成一份定制的 css 样式。</p>\n<p>这种方式对业务项目是非侵入式的，样式的定制和业务项目完全独立；但也有一个问题，就是每次更新 Zent 组件库都要重新生成一份定制主题。</p>\n<h4 class="anchor-heading"><a href="#ding-zhi-fang-fa">¶</a><a href="javascript:void(0)" id="ding-zhi-fang-fa" class="anchor-point"></a>定制方法</h4>\n<ol>\n<li>克隆 Zent <a href="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/youzan/zent">源码</a>并安装依赖</li>\n<li>在 <code>packages/zent/assets/theme</code> 目录下找到一个名为 <a href="https://github.com/youzan/zent/blob/master/packages/zent/assets/theme/_override.scss"><code>_override.scss</code></a> 的文件，这个文件是预留用来覆盖默认主题变量的，所有主题变量可以在同目录的 <a href="https://github.com/youzan/zent/blob/master/packages/zent/assets/theme/_default.scss"><code>_default.scss</code></a> 文件内找到</li>\n<li>在 <code>packages/zent</code> 目录下面执行 <code>yarn theme</code></li>\n<li>定制的主题样式文件会生成在 <code>packages/zent/css</code> 目录下</li>\n</ol>'}))}}]),s}(x.Component)}}]);