-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 27 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.2543ff947a193d7f33b1.css">@import url(https://fonts.googleapis.com/css?family=Inconsolata&display=swap);@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap);</style><meta name="generator" content="Gatsby 2.24.63"/><title data-rh="true">Home | Zain UI</title><meta data-rh="true" name="description" content="Zain UI"/><meta data-rh="true" property="og:title" content="Home"/><meta data-rh="true" property="og:description" content="Zain UI"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" name="twitter:card" content="summary"/><meta data-rh="true" name="twitter:title" content="Home"/><meta data-rh="true" name="twitter:description" content="Zain UI"/><link as="script" rel="preload" href="/webpack-runtime-abb84a7bd59ab404ecb1.js"/><link as="script" rel="preload" href="/styles-8c00a6d0538c7584a191.js"/><link as="script" rel="preload" href="/framework-7f59698a7f6bfe0c95ff.js"/><link as="script" rel="preload" href="/app-42dbcb4deafe6ed26d6c.js"/><link as="script" rel="preload" href="/bac1b955-aabd5d72bf53c652387a.js"/><link as="script" rel="preload" href="/67110494647469ee2a1e4b735bb84925da926e2b-e8f4eeb01778c329f810.js"/><link as="script" rel="preload" href="/component---docs-home-home-en-mdx-a3e8b3b03ba918f4fcde.js"/><link as="fetch" rel="preload" href="/page-data\index\page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/1635659820.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data\app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><style data-emotion-css="1ouyflx">.css-1ouyflx{font-family:'Source Sans Pro',sans-serif;font-size:20px;font-weight:400;line-height:1.5;color:var(--theme-ui-colors-text,#2D3747);background-color:var(--theme-ui-colors-background,#FFFFFF);}</style><div class="css-1ouyflx"><style data-emotion-css="jrjj6h">.css-jrjj6h > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="1ubpee3">.css-1ubpee3{min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-1ubpee3 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="hbri28">.css-hbri28{box-sizing:border-box;min-width:0;min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-hbri28 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><div data-testid="layout" class="css-hbri28"><style data-emotion-css="1xva7m0">body{margin:0;padding:0;}.icon-link{display:none;}.with-overlay{overflow:hidden;}</style><style data-emotion-css="zf0iqh">.css-zf0iqh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="1tjxv7i">.css-1tjxv7i{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="238csb">.css-238csb{box-sizing:border-box;min-width:0;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><main class="css-238csb"><style data-emotion-css="18wmtq">.css-18wmtq{background-color:var(--theme-ui-colors-header-bg,#F5F6F7);position:relative;z-index:1;border-bottom:1px solid var(--theme-ui-colors-border,#CED4DE);}</style><div data-testid="header" class="css-18wmtq"><style data-emotion-css="zankq9">.css-zankq9{display:none;position:absolute;top:calc(100% + 15px);left:30px;}@media screen and (max-width:57.5em){.css-zankq9{display:block;}}</style><style data-emotion-css="1s0wdqz">.css-1s0wdqz{box-sizing:border-box;min-width:0;display:none;position:absolute;top:calc(100% + 15px);left:30px;}@media screen and (max-width:57.5em){.css-1s0wdqz{display:block;}}</style><div class="css-1s0wdqz"><style data-emotion-css="4019lz">.css-4019lz{padding:0;outline:none;background:transparent;border:none;color:var(--theme-ui-colors-header-text,#2D3747);opacity:0.5;cursor:pointer;}.css-4019lz:hover{cursor:pointer;}</style><button class="css-4019lz"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button></div><style data-emotion-css="ihopyx">.css-ihopyx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-left:32px;padding-right:32px;position:relative;height:60px;}</style><div class="css-ihopyx"><style data-emotion-css="xenp3v">.css-xenp3v{-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><style data-emotion-css="1abzlu">.css-1abzlu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><style data-emotion-css="ug0363">.css-ug0363{box-sizing:border-box;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><div data-testid="logo" class="css-ug0363"><style data-emotion-css="gyijir">.css-gyijir{font-weight:600;color:var(--theme-ui-colors-header-text,#2D3747);-webkit-text-decoration:none;text-decoration:none;}.css-gyijir:hover{color:var(--theme-ui-colors-primary,#0B5FFF);}</style><a aria-current="page" class="css-gyijir" href="/"><style data-emotion-css="x27d0a">.css-x27d0a{float:left;height:32px;}</style><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQABAMAAACNMzawAAAAIVBMVEUAAAAAqv9AgP8glfIhlvMhlvMhlvMglvMglvUhlvP////y40OYAAAACXRSTlMAAwRg2drb3NzvaD3jAAAAAWJLR0QKaND0VgAADUlJREFUeNrt2l1NpEEURdEiWEAAEnhFAhKQwCtWSIB2i4iGm9vsdQxMpthf1Zqfc7H0jiMQgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAGYAEwAJgATgAnABGACMAEIwBEIwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmABMACYAE4AJwARgAjABmAAE4AgEYAIwAZgATAAmABPA7+392FV7uPEAPvwIr9vzjQfw9ehneM3uXm7dAE9+iNfs/uYRCAGrCfD3AUDAagL8fQAQsJoAA38PAAGbCTAQAARsJsBAABCwmQADAUDAZgJM/FsABCwmwEQAELCYABMBQMBiAkwEAAGLCTDy/wEgYC8BRgKAgL0EGAkAAvYSYCQACNhLgJn/EwgBawkwEwAErCXA5bxBQJkAnyO/CgSsJcDHzD0DAVsJ8D71y9hOAjxNXTS2kgBfjwcC2gQ4ENAmwIGANgEOBMQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJAAFxAkBAnAAQECcABNQJ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" alt="Zain UI Logo" class="css-x27d0a"/><style data-emotion-css="8m6h88">.css-8m6h88{float:right;padding-left:16px;line-height:32px;font-size:22px;}</style><span class="css-8m6h88">Zain UI</span></a></div><style data-emotion-css="k008qs">.css-k008qs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion-css="80zs6q">.css-80zs6q{box-sizing:border-box;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-80zs6q"><div class="MuiZuiLocales-root"><button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiZuiLocales-button" tabindex="0" type="button" aria-haspopup="true"><span class="MuiButton-label">EN</span></button></div><style data-emotion-css="12z0wuy">.css-12z0wuy{margin-right:8px;}</style><style data-emotion-css="q6cf68">.css-q6cf68{box-sizing:border-box;min-width:0;margin-right:8px;}</style><div class="css-q6cf68"><style data-emotion-css="1is33jg">.css-1is33jg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;outline:none;padding:12px;border:none;border-radius:9999px;background-color:var(--theme-ui-colors-header-button-bg,#0B5FFF);color:var(--theme-ui-colors-header-button-color,#FFFFFF);font-size:12px;font-weight:600;cursor:pointer;}</style><a href="https://github.com/zain-ui/zain-ui" target="_blank" rel="noopener noreferrer" class="css-1is33jg"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a></div><button aria-label="Switch to light mode" class="css-1is33jg"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></button></div><style data-emotion-css="1gncnz1">.css-1gncnz1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:absolute;bottom:-40px;right:30px;background-color:transparent;color:var(--theme-ui-colors-muted,#67788a);font-size:14px;-webkit-text-decoration:none;text-decoration:none;border-radius:4px;}</style><a href="https://github.com/zain-ui/zain-ui\edit\master\packages\zain-ui\docs/home/home.en.mdx" target="_blank" rel="noopener noreferrer" class="css-1gncnz1"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg><style data-emotion-css="1iuj5ih">.css-1iuj5ih{padding-left:8px;}</style><style data-emotion-css="1x2jprh">.css-1x2jprh{box-sizing:border-box;min-width:0;padding-left:8px;}</style><div class="css-1x2jprh">Edit page</div></a></div></div><style data-emotion-css="1nfi0ai">.css-1nfi0ai{padding-top:0;padding-bottom:0;-webkit-flex:1;-ms-flex:1;flex:1;display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh;}@media screen and (max-width:57.5em){.css-1nfi0ai{display:block;}}</style><div class="css-1nfi0ai"><style data-emotion-css="1tn7q1x">.css-1tn7q1x{z-index:999;position:fixed;top:81px;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;visibility:hidden;opacity:0;}</style><style data-emotion-css="h4snl3">.css-h4snl3{box-sizing:border-box;min-width:0;z-index:999;position:fixed;top:81px;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;visibility:hidden;opacity:0;}</style><div class="css-h4snl3"></div><style data-emotion-css="1ethd5x">.css-1ethd5x{padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:1;min-width:0;max-height:100vh;border-right:1px solid var(--theme-ui-colors-border,#CED4DE);overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--theme-ui-colors-sidebar-bg,#FFFFFF);}@media screen and (max-width:57.5em){.css-1ethd5x{z-index:9999;display:block;position:fixed;top:81px;left:0;bottom:0;width:256px;padding-left:32px;padding-right:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);-webkit-transition:-webkit-transform .2s ease-out;-webkit-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}</style><style data-emotion-css="1li9yso">.css-1li9yso{box-sizing:border-box;min-width:0;padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:1;min-width:0;max-height:100vh;border-right:1px solid var(--theme-ui-colors-border,#CED4DE);overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--theme-ui-colors-sidebar-bg,#FFFFFF);}@media screen and (max-width:57.5em){.css-1li9yso{z-index:9999;display:block;position:fixed;top:81px;left:0;bottom:0;width:256px;padding-left:32px;padding-right:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);-webkit-transition:-webkit-transform .2s ease-out;-webkit-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}</style><div data-testid="sidebar" class="css-1li9yso"><style data-emotion-css="lcm9hh">.css-lcm9hh{margin-bottom:16px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div data-testid="nav-search" class="css-lcm9hh"><style data-emotion-css="1mo6uhh">.css-1mo6uhh{color:var(--theme-ui-colors-border,#CED4DE);margin-right:8px;}</style><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-1mo6uhh"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg><style data-emotion-css="1bbueiu">.css-1bbueiu{outline:none;background:none;border:none;color:var(--theme-ui-colors-text,#2D3747);font-size:14px;}</style><input placeholder="Type to search..." value="" class="css-1bbueiu"/></div><style data-emotion-css="362vyh">.css-362vyh{padding-top:8px;padding-bottom:8px;display:block;color:var(--theme-ui-colors-sidebar-navGroup,#2D3747);-webkit-text-decoration:none;text-decoration:none;font-size:16px;}.css-362vyh.active{color:var(--theme-ui-colors-sidebar-navLinkActive,#0B5FFF);}.css-362vyh:hover{background-color:rgba(0,0,0,0.04);}</style><a aria-current="page" class="css-362vyh active" href="/">Home</a><div data-testid="nav-group" class="css-0"><style data-emotion-css="p4p6dp">.css-p4p6dp{padding-top:8px;padding-bottom:8px;font-size:16px;font-weight:500;color:var(--theme-ui-colors-sidebar-navGroup,#2D3747);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-p4p6dp:hover{background-color:rgba(0,0,0,0.04);}</style><div class="css-p4p6dp">Getting Started<style data-emotion-css="cu2sly">.css-cu2sly{margin-left:4px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline;-webkit-transform:rotateX(0deg);-ms-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:-webkit-transform .3s ease-in-out;-webkit-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out;}</style><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-cu2sly"><polyline points="6 9 12 15 18 9"></polyline></svg></div><style data-emotion-css="1isemmb">.css-1isemmb{margin-left:8px;}</style><div data-testid="nav-group-links" class="css-1isemmb"></div></div><div data-testid="nav-group" class="css-0"><div class="css-p4p6dp">Components<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-cu2sly"><polyline points="6 9 12 15 18 9"></polyline></svg></div><div data-testid="nav-group-links" class="css-1isemmb"></div></div></div><style data-emotion-css="1w3d2mg">.css-1w3d2mg{background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-1w3d2mg{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><style data-emotion-css="kjtkh5">.css-kjtkh5{width:100%;min-width:0;max-width:1280px;margin-left:auto;margin-right:auto;padding:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-kjtkh5{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><style data-emotion-css="1307vk3">.css-1307vk3{box-sizing:border-box;min-width:0;width:100%;min-width:0;max-width:1280px;margin-left:auto;margin-right:auto;padding:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-1307vk3{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><div data-testid="main-container" class="css-1307vk3"><style data-emotion-css="1vci3bl">.css-1vci3bl{padding:0;margin:0;margin-bottom:16px;font-size:48px;font-family:'Source Sans Pro',sans-serif;line-height:1.125;font-weight:700;}</style><h1 id="zain-ui-of-react" class="css-1vci3bl">Zain UI of React</h1><h4 id="this-is-the-best-practice-and-extension-of-material-ui-and-ant-design-the-most-popular-react-ui-framework-in-the-world"><style data-emotion-css="1r0pe6c">.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="#this-is-the-best-practice-and-extension-of-material-ui-and-ant-design-the-most-popular-react-ui-framework-in-the-world" class="css-1r0pe6c">This is the best practice and extension of Material-UI and Ant Design (the most popular React UI framework in the world).</a></h4></div></div></main></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-dcacf86bfbe0edc7269f.js"],"app":["/app-42dbcb4deafe6ed26d6c.js"],"component---components-menu-list-readme-md":["/component---components-menu-list-readme-md-5e65b48b2f3c443a0a5b.js"],"component---components-readme-md":["/component---components-readme-md-379e669476ac21d45524.js"],"component---docs-components-button-button-cn-mdx":["/component---docs-components-button-button-cn-mdx-d81be52fd81c0f0d46be.js"],"component---docs-components-button-button-en-mdx":["/component---docs-components-button-button-en-mdx-6c2d6bfa408b7125a7bf.js"],"component---docs-components-button-button-jp-mdx":["/component---docs-components-button-button-jp-mdx-ca90b949a6c8302bd9f9.js"],"component---docs-components-menu-menu-cn-mdx":["/component---docs-components-menu-menu-cn-mdx-6764d011ee6d28df5229.js"],"component---docs-components-menu-menu-en-mdx":["/component---docs-components-menu-menu-en-mdx-2fea336deda1853979b0.js"],"component---docs-components-menu-menu-jp-mdx":["/component---docs-components-menu-menu-jp-mdx-b34825531e33d59d6348.js"],"component---docs-getting-started-installation-installation-cn-mdx":["/component---docs-getting-started-installation-installation-cn-mdx-830ec0afa5ca24852319.js"],"component---docs-getting-started-installation-installation-en-mdx":["/component---docs-getting-started-installation-installation-en-mdx-89ab2dcd2541eb2c37fa.js"],"component---docs-getting-started-installation-installation-jp-mdx":["/component---docs-getting-started-installation-installation-jp-mdx-041f172838de8ace3370.js"],"component---docs-getting-started-usage-usage-cn-mdx":["/component---docs-getting-started-usage-usage-cn-mdx-90bed7bedd24e2bb0d93.js"],"component---docs-getting-started-usage-usage-en-mdx":["/component---docs-getting-started-usage-usage-en-mdx-f4d2ea07ef8d583feac1.js"],"component---docs-getting-started-usage-usage-jp-mdx":["/component---docs-getting-started-usage-usage-jp-mdx-1852667cb319bded5022.js"],"component---docs-home-home-cn-mdx":["/component---docs-home-home-cn-mdx-8e0abc316a02d3328057.js"],"component---docs-home-home-en-mdx":["/component---docs-home-home-en-mdx-a3e8b3b03ba918f4fcde.js"],"component---docs-home-home-jp-mdx":["/component---docs-home-home-jp-mdx-e7eba9475d91dbf92df1.js"],"component---lib-readme-md":["/component---lib-readme-md-717fd038f655097516d9.js"],"component---readme-md":["/component---readme-md-a3ecf0100fa35061cdc8.js"],"component---src-pages-404-js":["/component---src-pages-404-js-6d4d3dfe5bae3d551b65.js"],"component---src-readme-md":["/component---src-readme-md-001e17ba60dd7955de48.js"],"component---src-zain-components-docz-readme-md":["/component---src-zain-components-docz-readme-md-9fc3ef97d47a73bfbdd4.js"],"component---www-components-readme-md":["/component---www-components-readme-md-f0387ed827d6aa83ebc2.js"],"component---www-readme-md":["/component---www-readme-md-080f94757eba459df365.js"]};/*]]>*/</script><script src="/polyfill-dcacf86bfbe0edc7269f.js" nomodule=""></script><script src="/component---docs-home-home-en-mdx-a3e8b3b03ba918f4fcde.js" async=""></script><script src="/67110494647469ee2a1e4b735bb84925da926e2b-e8f4eeb01778c329f810.js" async=""></script><script src="/bac1b955-aabd5d72bf53c652387a.js" async=""></script><script src="/app-42dbcb4deafe6ed26d6c.js" async=""></script><script src="/framework-7f59698a7f6bfe0c95ff.js" async=""></script><script src="/styles-8c00a6d0538c7584a191.js" async=""></script><script src="/webpack-runtime-abb84a7bd59ab404ecb1.js" async=""></script></body></html>