buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-19 21:51:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add es6.md cheatsheet. b258494776

Browse Source
This commit is contained in:
jaywcjlove
2022-10-31 07:19:46 +00:00
parent 53cf1c63da
commit c71af37115
68 changed files with 3185 additions and 2812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
docs/styled-components.html
View File

@ -34,15 +34,15 @@
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
}
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="styled-components-备忘清单"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="styled-components-备忘清单"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
<path d="m16.214 6.762-.075.391c-.116.741-.074.953.244 1.228l.307.254-.318 1.418c-.19.846-.423 1.555-.571 1.788-.127.201-.275.497-.307.656-.053.19-.233.381-.508.55-.243.138-.72.508-1.058.805-.27.243-.456.392-.557.456l-.33.261a1.4 1.4 0 0 0-.189.411c-.023.107-.01.178.024.23.033.05.09.085.168.107a.954.954 0 0 0 .282.023 3 3 0 0 0 .632-.112c.07-.019.125-.037.173-.053.074-.091.245-.263.548-.562.804-.793 1.111-1.227.794-1.11-.117.042-.064-.064.137-.276.424-.413.667-1.037 1.175-2.994.402-1.545.402-1.567.698-1.567.139 0 .532.024.532.024V6.762h-.902zm3.839 3.165c-.064 0-.17.096-.233.202-.116.19.021.306 1.767 1.396 1.037.657 1.873 1.217 1.852 1.26-.021.031-.868.582-1.883 1.217-1.842 1.142-1.852 1.153-1.683 1.386.212.275 0 .37 2.391-1.122L24 13.155v-.836l-1.937-1.196c-1.047-.656-1.957-1.185-2.01-1.196zm-16.085.117c-.053 0-.963.54-2.01 1.185L0 12.425v.836l1.947 1.217c1.08.666 1.99 1.217 2.032 1.217.042 0 .127-.096.212-.212.127-.201.02-.286-1.768-1.418C.72 12.996.54 12.848.71 12.732c.106-.074.91-.572 1.778-1.111 1.979-1.217 1.873-1.133 1.714-1.387-.063-.105-.17-.2-.233-.19zm8.684.023c-.292-.002-.92.443-2.8 1.978-.081.193-.088.326-.051.412.024.059.068.1.129.13.06.03.138.048.224.055.171.015.373-.012.536-.044l.11-.025a.386.386 0 0 1 .144-.118c.116-.064.603-.508 1.09-.984.857-.868 1.058-1.26.709-1.387a.24.24 0 0 0-.09-.017zm2.196.603c-.257.007-.72.305-1.513.938-.398.323-.65.497-.785.533l-.524.414c-.197.36-.226.583-.174.706a.25.25 0 0 0 .138.134.644.644 0 0 0 .24.045 2.18 2.18 0 0 0 .58-.085 3.466 3.466 0 0 0 .291-.092l.029-.012.053-.028c.1-.129.33-.372.618-.652.91-.878 1.375-1.502 1.28-1.735-.043-.113-.117-.17-.233-.166zm-2.424 1.08c-.074.008-.24.136-.539.398-.432.382-.903.602-1.066.504a3.97 3.97 0 0 1-.114.024c-.166.033-.373.06-.558.045a.708.708 0 0 1-.252-.063.337.337 0 0 1-.168-.17c-.037-.09-.037-.202.005-.345l-.65.534-1.471 1.217v1.973l4.82-3.797a.41.41 0 0 1 .016-.123c.037-.134.035-.202-.023-.196zm2.074.639c-.073 0-.195.103-.39.31-.265.283-.682.557-.903.613l-.034.018a2.191 2.191 0 0 1-.11.042c-.06.02-.138.044-.228.068-.18.049-.404.094-.604.089a.732.732 0 0 1-.275-.054.344.344 0 0 1-.184-.18c-.058-.139-.035-.334.092-.611L7.61 16.033v1.205h1.868l3.962-3.112c.103-.114.258-.27.467-.465.56-.519.687-.698.687-.963 0-.206-.023-.31-.096-.31zm.943 1.95-.339.338c-.19.18-.529.402-.761.497l-.046.02-.003.005-.01.01c-.009.007-.013.008-.02.011a3.432 3.432 0 0 1-.282.093 3.058 3.058 0 0 1-.65.115 1.035 1.035 0 0 1-.31-.027.364.364 0 0 1-.218-.144c-.048-.074-.062-.173-.035-.295a1.11 1.11 0 0 1 .095-.25l-3.197 2.526h4.252l.508-.582c.698-.814 1.016-1.396 1.016-1.894z"></path>
</svg>
<a aria-hidden="true" tabindex="-1" href="#styled-components-备忘清单"><span class="icon icon-link"></span></a>styled-components 备忘清单</h1><div class="wrap-body">
<p>此快速参考备忘单提供了使用 CSS in JS 工具的各种方法。</p>
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装">安装</a><a aria-hidden="true" class="leve3 tocs-link" href="#快速开始">快速开始</a><a aria-hidden="true" class="leve3 tocs-link" href="#根据-props-适配">根据 Props 适配</a><a aria-hidden="true" class="leve3 tocs-link" href="#扩展样式">扩展样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#扩展样式改变标签-as">扩展样式改变标签 (as)</a><a aria-hidden="true" class="leve3 tocs-link" href="#自定义组件as">自定义组件(as)</a><a aria-hidden="true" class="leve3 tocs-link" href="#样式化任何组件">样式化任何组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#在-render-之外定义-styled-组件">在 render 之外定义 Styled 组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#传入值">传入值</a><a aria-hidden="true" class="leve3 tocs-link" href="#样式对象">样式对象</a><a aria-hidden="true" class="leve3 tocs-link" href="#cssmodules--styled">CSSModules => styled</a><a aria-hidden="true" class="leve4 tocs-link" href="#-与下面-styled-写法等效-">👇👇 与下面 styled 写法等效 👇👇</a><a aria-hidden="true" class="leve3 tocs-link" href="#伪元素伪选择器和嵌套">伪元素、伪选择器和嵌套</a><a aria-hidden="true" class="leve3 tocs-link" href="#改变-styled-组件样式">改变 styled 组件样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#全局样式-createglobalstyle">全局样式 createGlobalStyle</a><a aria-hidden="true" class="leve3 tocs-link" href="#classname-使用">className 使用</a><a aria-hidden="true" class="leve3 tocs-link" href="#共享样式片段">共享样式片段</a><a aria-hidden="true" class="leve3 tocs-link" href="#class-组件样式定义">Class 组件样式定义</a><a aria-hidden="true" class="leve3 tocs-link" href="#附加额外的-props">附加额外的 Props</a><a aria-hidden="true" class="leve3 tocs-link" href="#覆盖-attrs">覆盖 .attrs</a><a aria-hidden="true" class="leve3 tocs-link" href="#动画">动画</a><a aria-hidden="true" class="leve3 tocs-link" href="#isstyledcomponent">isStyledComponent</a><a aria-hidden="true" class="leve3 tocs-link" href="#themeconsumer">ThemeConsumer</a><a aria-hidden="true" class="leve2 tocs-link" href="#typescript">TypeScript</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装-1">安装</a><a aria-hidden="true" class="leve3 tocs-link" href="#自定义-props">自定义 Props</a><a aria-hidden="true" class="leve3 tocs-link" href="#简单的-props-类型定义">简单的 Props 类型定义</a><a aria-hidden="true" class="leve3 tocs-link" href="#禁止转移到子组件">禁止转移到子组件($)</a><a aria-hidden="true" class="leve3 tocs-link" href="#函数组件类型继承">函数组件类型继承</a><a aria-hidden="true" class="leve2 tocs-link" href="#react-native">React Native</a><a aria-hidden="true" class="leve3 tocs-link" href="#基础实例">基础实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#react-native-中写-css">React Native 中写 CSS</a><a aria-hidden="true" class="leve2 tocs-link" href="#高级用法">高级用法</a><a aria-hidden="true" class="leve3 tocs-link" href="#主题化">主题化</a><a aria-hidden="true" class="leve3 tocs-link" href="#功能主题">功能主题</a><a aria-hidden="true" class="leve3 tocs-link" href="#通过-withtheme-高阶组件">通过 withTheme 高阶组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#usecontext-钩子">useContext 钩子</a><a aria-hidden="true" class="leve3 tocs-link" href="#usetheme-自定义钩子">useTheme 自定义钩子</a><a aria-hidden="true" class="leve3 tocs-link" href="#主题-props">主题 props</a><a aria-hidden="true" class="leve3 tocs-link" href="#refs">Refs</a><a aria-hidden="true" class="leve3 tocs-link" href="#特异性问题">特异性问题</a><a aria-hidden="true" class="leve4 tocs-link" href="#解决方案">解决方案</a><a aria-hidden="true" class="leve3 tocs-link" href="#themeprovider">ThemeProvider</a><a aria-hidden="true" class="leve3 tocs-link" href="#shouldforwardprop">shouldForwardProp</a></div></div><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="安装"><a aria-hidden="true" tabindex="-1" href="#安装"><span class="icon icon-link"></span></a>安装</h3><div class="wrap-body">
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装">安装</a><a aria-hidden="true" class="leve3 tocs-link" href="#快速开始">快速开始</a><a aria-hidden="true" class="leve3 tocs-link" href="#根据-props-适配">根据 Props 适配</a><a aria-hidden="true" class="leve3 tocs-link" href="#扩展样式">扩展样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#扩展样式改变标签-as">扩展样式改变标签 (as)</a><a aria-hidden="true" class="leve3 tocs-link" href="#自定义组件as">自定义组件(as)</a><a aria-hidden="true" class="leve3 tocs-link" href="#样式化任何组件">样式化任何组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#在-render-之外定义-styled-组件">在 render 之外定义 Styled 组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#传入值">传入值</a><a aria-hidden="true" class="leve3 tocs-link" href="#样式对象">样式对象</a><a aria-hidden="true" class="leve3 tocs-link" href="#cssmodules--styled">CSSModules => styled</a><a aria-hidden="true" class="leve4 tocs-link" href="#-与下面-styled-写法等效-">👇👇 与下面 styled 写法等效 👇👇</a><a aria-hidden="true" class="leve3 tocs-link" href="#伪元素伪选择器和嵌套">伪元素、伪选择器和嵌套</a><a aria-hidden="true" class="leve3 tocs-link" href="#改变-styled-组件样式">改变 styled 组件样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#全局样式-createglobalstyle">全局样式 createGlobalStyle</a><a aria-hidden="true" class="leve3 tocs-link" href="#classname-使用">className 使用</a><a aria-hidden="true" class="leve3 tocs-link" href="#共享样式片段">共享样式片段</a><a aria-hidden="true" class="leve3 tocs-link" href="#class-组件样式定义">Class 组件样式定义</a><a aria-hidden="true" class="leve3 tocs-link" href="#附加额外的-props">附加额外的 Props</a><a aria-hidden="true" class="leve3 tocs-link" href="#覆盖-attrs">覆盖 .attrs</a><a aria-hidden="true" class="leve3 tocs-link" href="#动画">动画</a><a aria-hidden="true" class="leve3 tocs-link" href="#isstyledcomponent">isStyledComponent</a><a aria-hidden="true" class="leve3 tocs-link" href="#themeconsumer">ThemeConsumer</a><a aria-hidden="true" class="leve2 tocs-link" href="#typescript">TypeScript</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装-1">安装</a><a aria-hidden="true" class="leve3 tocs-link" href="#自定义-props">自定义 Props</a><a aria-hidden="true" class="leve3 tocs-link" href="#简单的-props-类型定义">简单的 Props 类型定义</a><a aria-hidden="true" class="leve3 tocs-link" href="#禁止转移到子组件">禁止转移到子组件($)</a><a aria-hidden="true" class="leve3 tocs-link" href="#函数组件类型继承">函数组件类型继承</a><a aria-hidden="true" class="leve2 tocs-link" href="#react-native">React Native</a><a aria-hidden="true" class="leve3 tocs-link" href="#基础实例">基础实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#react-native-中写-css">React Native 中写 CSS</a><a aria-hidden="true" class="leve2 tocs-link" href="#高级用法">高级用法</a><a aria-hidden="true" class="leve3 tocs-link" href="#主题化">主题化</a><a aria-hidden="true" class="leve3 tocs-link" href="#功能主题">功能主题</a><a aria-hidden="true" class="leve3 tocs-link" href="#通过-withtheme-高阶组件">通过 withTheme 高阶组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#usecontext-钩子">useContext 钩子</a><a aria-hidden="true" class="leve3 tocs-link" href="#usetheme-自定义钩子">useTheme 自定义钩子</a><a aria-hidden="true" class="leve3 tocs-link" href="#主题-props">主题 props</a><a aria-hidden="true" class="leve3 tocs-link" href="#refs">Refs</a><a aria-hidden="true" class="leve3 tocs-link" href="#特异性问题">特异性问题</a><a aria-hidden="true" class="leve4 tocs-link" href="#解决方案">解决方案</a><a aria-hidden="true" class="leve3 tocs-link" href="#themeprovider">ThemeProvider</a><a aria-hidden="true" class="leve3 tocs-link" href="#shouldforwardprop">shouldForwardProp</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="安装"><a aria-hidden="true" tabindex="-1" href="#安装"><span class="icon icon-link"></span></a>安装</h3><div class="wrap-body">
<p><a href="https://styled-components.com">Styled Components</a> 是增强 CSS 在 React 组件系统样式的 CSS in JS 的最佳实践。</p>
<ul>
<li><a href="https://github.com/styled-components/vscode-styled-components">VSCode styled-components</a> <em>有代码高亮和代码提示</em></li>
@ -52,7 +52,7 @@
<p>安装依赖和 TypeScript 类型依赖</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> styled-components
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="快速开始"><a aria-hidden="true" tabindex="-1" href="#快速开始"><span class="icon icon-link"></span></a>快速开始</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="快速开始"><a aria-hidden="true" tabindex="-1" href="#快速开始"><span class="icon icon-link"></span></a>快速开始</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled</span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>
</span></code></pre>
@ -81,7 +81,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="根据-props-适配"><a aria-hidden="true" tabindex="-1" href="#根据-props-适配"><span class="icon icon-link"></span></a>根据 Props 适配</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="根据-props-适配"><a aria-hidden="true" tabindex="-1" href="#根据-props-适配"><span class="icon icon-link"></span></a>根据 Props 适配</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled</span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>
</span><span class="code-line">
@ -112,7 +112,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="扩展样式"><a aria-hidden="true" tabindex="-1" href="#扩展样式"><span class="icon icon-link"></span></a>扩展样式</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="扩展样式"><a aria-hidden="true" tabindex="-1" href="#扩展样式"><span class="icon icon-link"></span></a>扩展样式</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Button</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">button</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">palevioletred</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span> solid <span class="token color">palevioletred</span><span class="token punctuation">;</span>
@ -130,7 +130,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="扩展样式改变标签-as"><a aria-hidden="true" tabindex="-1" href="#扩展样式改变标签-as"><span class="icon icon-link"></span></a>扩展样式改变标签 (as)</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="扩展样式改变标签-as"><a aria-hidden="true" tabindex="-1" href="#扩展样式改变标签-as"><span class="icon icon-link"></span></a>扩展样式改变标签 (as)</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Button</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">button</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">palevioletred</span><span class="token punctuation">;</span>
@ -157,7 +157,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="自定义组件as"><a aria-hidden="true" tabindex="-1" href="#自定义组件as"><span class="icon icon-link"></span></a>自定义组件(as)</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="自定义组件as"><a aria-hidden="true" tabindex="-1" href="#自定义组件as"><span class="icon icon-link"></span></a>自定义组件(as)</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Button</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">button</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">palevioletred</span><span class="token punctuation">;</span>
@ -184,7 +184,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="样式化任何组件"><a aria-hidden="true" tabindex="-1" href="#样式化任何组件"><span class="icon icon-link"></span></a>样式化任何组件</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="样式化任何组件"><a aria-hidden="true" tabindex="-1" href="#样式化任何组件"><span class="icon icon-link"></span></a>样式化任何组件</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Link</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> className<span class="token punctuation">,</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>className<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token plain-text">
@ -196,7 +196,7 @@
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">StyledLink</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hello<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#d7a100;" id="在-render-之外定义-styled-组件"><a aria-hidden="true" tabindex="-1" href="#在-render-之外定义-styled-组件"><span class="icon icon-link"></span></a>在 render 之外定义 Styled 组件</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 style="background:#d7a100;" id="在-render-之外定义-styled-组件"><a aria-hidden="true" tabindex="-1" href="#在-render-之外定义-styled-组件"><span class="icon icon-link"></span></a>在 render 之外定义 Styled 组件</h3><div class="wrap-body">
<!--rehype:style=background:#d7a100;-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Box</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css"><span class="token comment">/* ... */</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Wrapper</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@ -209,7 +209,7 @@
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></code></pre>
<p>注意：组件 <code>Box</code> 不能放到 <code>Wrapper</code> 函数组件里面</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="传入值"><a aria-hidden="true" tabindex="-1" href="#传入值"><span class="icon icon-link"></span></a>传入值</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="传入值"><a aria-hidden="true" tabindex="-1" href="#传入值"><span class="icon icon-link"></span></a>传入值</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Input</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">input</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>
</span></span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token parameter">props</span> <span class="token arrow operator">=></span>
@ -231,7 +231,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="样式对象"><a aria-hidden="true" tabindex="-1" href="#样式对象"><span class="icon icon-link"></span></a>样式对象</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="样式对象"><a aria-hidden="true" tabindex="-1" href="#样式对象"><span class="icon icon-link"></span></a>样式对象</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">PropsBox</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token method function property-access">div</span><span class="token punctuation">(</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line highlight-line"> <span class="token literal-property property">background</span><span class="token operator">:</span> props<span class="token punctuation">.</span><span class="token property-access">background</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'50px'</span><span class="token punctuation">,</span>
@ -251,7 +251,7 @@
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>注意：样式对象里面的样式并不是 CSS 中的写法。</p>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="cssmodules--styled"><a aria-hidden="true" tabindex="-1" href="#cssmodules--styled"><span class="icon icon-link"></span></a>CSSModules => styled</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="cssmodules--styled"><a aria-hidden="true" tabindex="-1" href="#cssmodules--styled"><span class="icon icon-link"></span></a>CSSModules => styled</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styles</span> <span class="token keyword module">from</span> <span class="token string">'./styles.css'</span><span class="token punctuation">;</span>
@ -279,7 +279,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="-与下面-styled-写法等效-"><a aria-hidden="true" tabindex="-1" href="#-与下面-styled-写法等效-"><span class="icon icon-link"></span></a>👇👇 与下面 <strong>styled</strong> 写法等效 👇👇</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="-与下面-styled-写法等效-"><a aria-hidden="true" tabindex="-1" href="#-与下面-styled-写法等效-"><span class="icon icon-link"></span></a>👇👇 与下面 <strong>styled</strong> 写法等效 👇👇</h4><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled</span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">StyledCounter</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
@ -312,7 +312,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="伪元素伪选择器和嵌套"><a aria-hidden="true" tabindex="-1" href="#伪元素伪选择器和嵌套"><span class="icon icon-link"></span></a>伪元素、伪选择器和嵌套</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="伪元素伪选择器和嵌套"><a aria-hidden="true" tabindex="-1" href="#伪元素伪选择器和嵌套"><span class="icon icon-link"></span></a>伪元素、伪选择器和嵌套</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Thing</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token punctuation">.</span><span class="token method function property-access">attrs</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token comment">/* props */</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">tabIndex</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> color: blue;
@ -348,7 +348,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="改变-styled-组件样式"><a aria-hidden="true" tabindex="-1" href="#改变-styled-组件样式"><span class="icon icon-link"></span></a>改变 styled 组件样式</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="改变-styled-组件样式"><a aria-hidden="true" tabindex="-1" href="#改变-styled-组件样式"><span class="icon icon-link"></span></a>改变 styled 组件样式</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> css <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled</span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
@ -394,7 +394,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="全局样式-createglobalstyle"><a aria-hidden="true" tabindex="-1" href="#全局样式-createglobalstyle"><span class="icon icon-link"></span></a>全局样式 createGlobalStyle</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="全局样式-createglobalstyle"><a aria-hidden="true" tabindex="-1" href="#全局样式-createglobalstyle"><span class="icon icon-link"></span></a>全局样式 createGlobalStyle</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
</span></span><span class="code-line"><span class="token imports"> styled<span class="token punctuation">,</span>
</span></span><span class="code-line highlight-line"><span class="token imports"> createGlobalStyle
@ -420,7 +420,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="classname-使用"><a aria-hidden="true" tabindex="-1" href="#classname-使用"><span class="icon icon-link"></span></a>className 使用</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="classname-使用"><a aria-hidden="true" tabindex="-1" href="#classname-使用"><span class="icon icon-link"></span></a>className 使用</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-JSX code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Thing</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token comment">/* &#x3C;Thing> 中标记为“.something”的元素 */</span>
@ -445,7 +445,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="共享样式片段"><a aria-hidden="true" tabindex="-1" href="#共享样式片段"><span class="icon icon-link"></span></a>共享样式片段</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="共享样式片段"><a aria-hidden="true" tabindex="-1" href="#共享样式片段"><span class="icon icon-link"></span></a>共享样式片段</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> rotate <span class="token operator">=</span> keyframes<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token selector">from</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span><span class="token number">0</span><span class="token unit">px</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token selector">to</span> <span class="token punctuation">{</span><span class="token property">top</span><span class="token punctuation">:</span><span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
@ -461,7 +461,7 @@
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">animation</span><span class="token punctuation">:</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rotate<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token number">2</span><span class="token unit">s</span> linear infinite<span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="class-组件样式定义"><a aria-hidden="true" tabindex="-1" href="#class-组件样式定义"><span class="icon icon-link"></span></a>Class 组件样式定义</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="class-组件样式定义"><a aria-hidden="true" tabindex="-1" href="#class-组件样式定义"><span class="icon icon-link"></span></a>Class 组件样式定义</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">NewHeader</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
@ -478,7 +478,7 @@
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="附加额外的-props"><a aria-hidden="true" tabindex="-1" href="#附加额外的-props"><span class="icon icon-link"></span></a>附加额外的 Props</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="附加额外的-props"><a aria-hidden="true" tabindex="-1" href="#附加额外的-props"><span class="icon icon-link"></span></a>附加额外的 Props</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Input</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">input</span><span class="token punctuation">.</span><span class="token method function property-access">attrs</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token arrow operator">=></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// 我们可以定义静态道具</span>
</span><span class="code-line highlight-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"text"</span><span class="token punctuation">,</span>
@ -509,7 +509,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="覆盖-attrs"><a aria-hidden="true" tabindex="-1" href="#覆盖-attrs"><span class="icon icon-link"></span></a>覆盖 .attrs</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="覆盖-attrs"><a aria-hidden="true" tabindex="-1" href="#覆盖-attrs"><span class="icon icon-link"></span></a>覆盖 .attrs</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Input</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">input</span><span class="token punctuation">.</span><span class="token method function property-access">attrs</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token arrow operator">=></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"text"</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">size</span><span class="token operator">:</span> props<span class="token punctuation">.</span><span class="token property-access">size</span> <span class="token operator">||</span> <span class="token string">"1em"</span><span class="token punctuation">,</span>
@ -542,7 +542,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="动画"><a aria-hidden="true" tabindex="-1" href="#动画"><span class="icon icon-link"></span></a>动画</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="动画"><a aria-hidden="true" tabindex="-1" href="#动画"><span class="icon icon-link"></span></a>动画</h3><div class="wrap-body">
<p>创建关键帧</p>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> rotate <span class="token operator">=</span> keyframes<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token selector">from</span> <span class="token punctuation">{</span>
@ -570,7 +570,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="isstyledcomponent"><a aria-hidden="true" tabindex="-1" href="#isstyledcomponent"><span class="icon icon-link"></span></a>isStyledComponent</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="isstyledcomponent"><a aria-hidden="true" tabindex="-1" href="#isstyledcomponent"><span class="icon icon-link"></span></a>isStyledComponent</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled<span class="token punctuation">,</span> <span class="token punctuation">{</span> isStyledComponent <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
@ -588,7 +588,7 @@
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="themeconsumer"><a aria-hidden="true" tabindex="-1" href="#themeconsumer"><span class="icon icon-link"></span></a>ThemeConsumer</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="themeconsumer"><a aria-hidden="true" tabindex="-1" href="#themeconsumer"><span class="icon icon-link"></span></a>ThemeConsumer</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">ThemeConsumer</span>
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
@ -603,8 +603,8 @@
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="typescript"><a aria-hidden="true" tabindex="-1" href="#typescript"><span class="icon icon-link"></span></a>TypeScript</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="安装-1"><a aria-hidden="true" tabindex="-1" href="#安装-1"><span class="icon icon-link"></span></a>安装</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="typescript"><a aria-hidden="true" tabindex="-1" href="#typescript"><span class="icon icon-link"></span></a>TypeScript</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="安装-1"><a aria-hidden="true" tabindex="-1" href="#安装-1"><span class="icon icon-link"></span></a>安装</h3><div class="wrap-body">
<p>Web 应用上安装 styled</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> @types/styled-components
</span></code></pre>
@ -614,7 +614,7 @@
</span><span class="code-line"> @types/styled-components-react-native
</span></code></pre>
<p>如果对 TypeScript 不熟悉，参考 <a href="./typescript.html">TypeScript 备忘清单</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="自定义-props"><a aria-hidden="true" tabindex="-1" href="#自定义-props"><span class="icon icon-link"></span></a>自定义 Props</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="自定义-props"><a aria-hidden="true" tabindex="-1" href="#自定义-props"><span class="icon icon-link"></span></a>自定义 Props</h3><div class="wrap-body">
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token imports">styled</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">TitleProps</span> <span class="token punctuation">{</span>
@ -629,7 +629,7 @@
</span></span></span><span class="code-line"><span class="token template-string"><span class="token interpolation"> <span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="简单的-props-类型定义"><a aria-hidden="true" tabindex="-1" href="#简单的-props-类型定义"><span class="icon icon-link"></span></a>简单的 Props 类型定义</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="简单的-props-类型定义"><a aria-hidden="true" tabindex="-1" href="#简单的-props-类型定义"><span class="icon icon-link"></span></a>简单的 Props 类型定义</h3><div class="wrap-body">
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token imports">styled</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword">import</span> <span class="token imports"><span class="token maybe-class-name">Header</span></span> <span class="token keyword">from</span> <span class="token string">'./Header'</span><span class="token punctuation">;</span>
</span><span class="code-line">
@ -643,7 +643,7 @@
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> color: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token operator">=></span> props<span class="token punctuation">.</span>customColor<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="禁止转移到子组件"><a aria-hidden="true" tabindex="-1" href="#禁止转移到子组件"><span class="icon icon-link"></span></a>禁止转移到子组件($)</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="禁止转移到子组件"><a aria-hidden="true" tabindex="-1" href="#禁止转移到子组件"><span class="icon icon-link"></span></a>禁止转移到子组件($)</h3><div class="wrap-body">
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token imports">styled</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword">import</span> <span class="token imports"><span class="token maybe-class-name">Header</span></span> <span class="token keyword">from</span> <span class="token string">'./Header'</span><span class="token punctuation">;</span>
</span><span class="code-line">
@ -658,7 +658,7 @@
</span></span><span class="code-line"><span class="token plain-text">`;
</span></span></code></pre>
<p>禁止 <code>customColor</code> 属性转移到 <code>Header</code> 组件，在其前面加上美元(<code>$</code>)符号</p>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="函数组件类型继承"><a aria-hidden="true" tabindex="-1" href="#函数组件类型继承"><span class="icon icon-link"></span></a>函数组件类型继承</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="函数组件类型继承"><a aria-hidden="true" tabindex="-1" href="#函数组件类型继承"><span class="icon icon-link"></span></a>函数组件类型继承</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">FC</span><span class="token punctuation">,</span> <span class="token maybe-class-name">PropsWithRef</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DetailedHTMLProps</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ImgHTMLAttributes</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword">import</span> <span class="token imports">styled</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span><span class="token punctuation">;</span>
@ -676,9 +676,9 @@
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Img</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="react-native"><a aria-hidden="true" tabindex="-1" href="#react-native"><span class="icon icon-link"></span></a>React Native</h2><div class="wrap-body">
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="react-native"><a aria-hidden="true" tabindex="-1" href="#react-native"><span class="icon icon-link"></span></a>React Native</h2><div class="wrap-body">
<!--rehype:body-class=cols-4-->
</div></div><div class="h2wrap-body cols-4"><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="基础实例"><a aria-hidden="true" tabindex="-1" href="#基础实例"><span class="icon icon-link"></span></a>基础实例</h3><div class="wrap-body">
</div></div><div class="h2wrap-body cols-4"><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="基础实例"><a aria-hidden="true" tabindex="-1" href="#基础实例"><span class="icon icon-link"></span></a>基础实例</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled</span> <span class="token keyword module">from</span> <span class="token string">'styled-components/native'</span>
@ -700,7 +700,7 @@
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="react-native-中写-css"><a aria-hidden="true" tabindex="-1" href="#react-native-中写-css"><span class="icon icon-link"></span></a>React Native 中写 CSS</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="react-native-中写-css"><a aria-hidden="true" tabindex="-1" href="#react-native-中写-css"><span class="icon icon-link"></span></a>React Native 中写 CSS</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled</span> <span class="token keyword module">from</span> <span class="token string">'styled-components/native'</span>
</span><span class="code-line">
@ -718,9 +718,9 @@
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>与 web 版本的一些区别是，您不能使用关键帧(<code>keyframes</code>)和 <code>createGlobalStyle</code> 助手，因为 React Native 不支持关键帧或全局样式。如果您使用媒体查询或嵌套 CSS，我们也会警告您。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="高级用法"><a aria-hidden="true" tabindex="-1" href="#高级用法"><span class="icon icon-link"></span></a>高级用法</h2><div class="wrap-body">
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="高级用法"><a aria-hidden="true" tabindex="-1" href="#高级用法"><span class="icon icon-link"></span></a>高级用法</h2><div class="wrap-body">
<!--rehype:body-class=cols-6-->
</div></div><div class="h2wrap-body cols-6"><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="主题化"><a aria-hidden="true" tabindex="-1" href="#主题化"><span class="icon icon-link"></span></a>主题化</h3><div class="wrap-body">
</div></div><div class="h2wrap-body cols-6"><div class="wrap h3body-not-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="主题化"><a aria-hidden="true" tabindex="-1" href="#主题化"><span class="icon icon-link"></span></a>主题化</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-3-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">ThemeProvider</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
</span><span class="code-line">
@ -758,7 +758,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="功能主题"><a aria-hidden="true" tabindex="-1" href="#功能主题"><span class="icon icon-link"></span></a>功能主题</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="功能主题"><a aria-hidden="true" tabindex="-1" href="#功能主题"><span class="icon icon-link"></span></a>功能主题</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-3-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">ThemeProvider</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
</span><span class="code-line">
@ -796,7 +796,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">ThemeProvider</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="通过-withtheme-高阶组件"><a aria-hidden="true" tabindex="-1" href="#通过-withtheme-高阶组件"><span class="icon icon-link"></span></a>通过 withTheme 高阶组件</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="通过-withtheme-高阶组件"><a aria-hidden="true" tabindex="-1" href="#通过-withtheme-高阶组件"><span class="icon icon-link"></span></a>通过 withTheme 高阶组件</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-3-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> withTheme <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
</span><span class="code-line">
@ -809,7 +809,7 @@
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">withTheme</span><span class="token punctuation">(</span><span class="token maybe-class-name">MyComponent</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="usecontext-钩子"><a aria-hidden="true" tabindex="-1" href="#usecontext-钩子"><span class="icon icon-link"></span></a>useContext 钩子</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="usecontext-钩子"><a aria-hidden="true" tabindex="-1" href="#usecontext-钩子"><span class="icon icon-link"></span></a>useContext 钩子</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-3-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useContext <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ThemeContext</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
@ -821,7 +821,7 @@
</span><span class="code-line"> <span class="token comment">// ...</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="usetheme-自定义钩子"><a aria-hidden="true" tabindex="-1" href="#usetheme-自定义钩子"><span class="icon icon-link"></span></a>useTheme 自定义钩子</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="usetheme-自定义钩子"><a aria-hidden="true" tabindex="-1" href="#usetheme-自定义钩子"><span class="icon icon-link"></span></a>useTheme 自定义钩子</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>useTheme<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
</span><span class="code-line">
@ -832,7 +832,7 @@
</span><span class="code-line"> <span class="token comment">// ...</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="主题-props"><a aria-hidden="true" tabindex="-1" href="#主题-props"><span class="icon icon-link"></span></a>主题 props</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="主题-props"><a aria-hidden="true" tabindex="-1" href="#主题-props"><span class="icon icon-link"></span></a>主题 props</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">ThemeProvider</span><span class="token punctuation">,</span>
@ -872,7 +872,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="refs"><a aria-hidden="true" tabindex="-1" href="#refs"><span class="icon icon-link"></span></a>Refs</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="refs"><a aria-hidden="true" tabindex="-1" href="#refs"><span class="icon icon-link"></span></a>Refs</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">ThemeProvider</span><span class="token punctuation">,</span>
@ -910,7 +910,7 @@
</span><span class="code-line"> <span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="特异性问题"><a aria-hidden="true" tabindex="-1" href="#特异性问题"><span class="icon icon-link"></span></a>特异性问题</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="特异性问题"><a aria-hidden="true" tabindex="-1" href="#特异性问题"><span class="icon icon-link"></span></a>特异性问题</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>在文件 <code>MyComponent.js</code> 中定义 <code>MyComponent</code> 组件。</p>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">MyComponent</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
@ -926,12 +926,12 @@
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MyComponent</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>red-bg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span></code></pre>
<p>由于某种原因，这个组件仍然有绿色背景，即使你试图用 <code>red-bg</code> 类覆盖它！</p>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="解决方案"><a aria-hidden="true" tabindex="-1" href="#解决方案"><span class="icon icon-link"></span></a>解决方案</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap h4body-not-exist"><div class="wrap-header h4wrap"><h4 id="解决方案"><a aria-hidden="true" tabindex="-1" href="#解决方案"><span class="icon icon-link"></span></a>解决方案</h4><div class="wrap-body">
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.red-bg</span><span class="token class">.red-bg</span></span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="themeprovider"><a aria-hidden="true" tabindex="-1" href="#themeprovider"><span class="icon icon-link"></span></a>ThemeProvider</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap h3body-not-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="themeprovider"><a aria-hidden="true" tabindex="-1" href="#themeprovider"><span class="icon icon-link"></span></a>ThemeProvider</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-3-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styled<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">ThemeProvider</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
</span><span class="code-line">
@ -945,7 +945,7 @@
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">ThemeProvider</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="shouldforwardprop"><a aria-hidden="true" tabindex="-1" href="#shouldforwardprop"><span class="icon icon-link"></span></a>shouldForwardProp</h3><div class="wrap-body">
</div></div></div><div class="wrap h3body-not-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="shouldforwardprop"><a aria-hidden="true" tabindex="-1" href="#shouldforwardprop"><span class="icon icon-link"></span></a>shouldForwardProp</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-3-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Comp</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">withConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function-variable function">shouldForwardProp</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">prop<span class="token punctuation">,</span> defaultValidatorFn</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
@ -976,8 +976,6 @@ function anchorPoint() {
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
if (elm?.tagName === 'H3') {
elm?.parentElement?.parentElement?.classList.add('active');
const box = elm?.parentElement?.parentElement;
console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
}
}
anchorPoint();
@ -988,7 +986,6 @@ function updateAnchor(element) {
tocanchor.classList.remove('is-active-link');
});
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
console.log('anchor', anchor)
if (anchor) {
anchor.classList.add('is-active-link');
}