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

website: adjust the layout. f60826e6da

Browse Source
This commit is contained in:
jaywcjlove
2022-10-31 08:38:59 +00:00
parent c71af37115
commit 2f6a6cca1c
41 changed files with 473 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/styled-components.html
View File

@ -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 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">
</div></div><div class="h3wrap-body"><h4 id="-与下面-styled-写法等效-"><a aria-hidden="true" tabindex="-1" href="#-与下面-styled-写法等效-"><span class="icon icon-link"></span></a>👇👇 与下面 <strong>styled</strong> 写法等效 👇👇</h4>
<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 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">
</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;
@ -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 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">
</div></div><div class="h3wrap-body"><h4 id="解决方案"><a aria-hidden="true" tabindex="-1" href="#解决方案"><span class="icon icon-link"></span></a>解决方案</h4>
<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 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">
</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">