becolomochi

<h2 id="link" data-line="0" class="code-line">
<a class="header-anchor-link" href="#link" aria-hidden="true"></a> Link</h2>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ef58b821e5312" src="https://embed.zenn.studio/card#zenn-embedded__ef58b821e5312" data-content="https%3A%2F%2Fvanilla-extract.style%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vanilla-extract.style/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vanilla-extract.style/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7e0c8c99499c9" src="https://embed.zenn.studio/card#zenn-embedded__7e0c8c99499c9" data-content="https%3A%2F%2Fzenn.dev%2Ftonkotsuboy_com%2Farticles%2Fvanilla-extract" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/tonkotsuboy_com/articles/vanilla-extract" style="display:none" target="_blank">https://zenn.dev/tonkotsuboy_com/articles/vanilla-extract</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9393f8058f081" src="https://embed.zenn.studio/card#zenn-embedded__9393f8058f081" data-content="https%3A%2F%2Fgithub.com%2Fvanilla-extract-css%2Fvanilla-extract" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/vanilla-extract-css/vanilla-extract" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/vanilla-extract-css/vanilla-extract</a></p>


<h2 id="%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E6%9B%B8%E3%81%8F" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> スタイルを書く</h2>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8d0ff8bb488d9" src="https://embed.zenn.studio/card#zenn-embedded__8d0ff8bb488d9" data-content="https%3A%2F%2Fvanilla-extract.style%2Fdocumentation%2Fstyling" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vanilla-extract.style/documentation/styling" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vanilla-extract.style/documentation/styling</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__169b2979c95ca" src="https://embed.zenn.studio/card#zenn-embedded__169b2979c95ca" data-content="https%3A%2F%2Fvanilla-extract.style%2Fdocumentation%2Fapi%2Fstyle%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vanilla-extract.style/documentation/api/style/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vanilla-extract.style/documentation/api/style/</a></p>
<div class="code-block-container"><pre><code class="code-line" data-line="5">pnpm add -D @vanilla-extract/css
</code></pre></div><div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="9"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> style <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">"@vanilla-extract/css"</span>
</code></pre></div>

<h2 id="%E3%83%90%E3%83%AA%E3%82%A2%E3%83%B3%E3%83%88%E3%82%92%E6%9B%B8%E3%81%8F" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%AA%E3%82%A2%E3%83%B3%E3%83%88%E3%82%92%E6%9B%B8%E3%81%8F" aria-hidden="true"></a> バリアントを書く</h2>
<div class="code-block-container"><pre class="language-tsx"><code class="language-tsx code-line" data-line="2"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> style<span class="token punctuation">,</span> styleVariants <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">"@vanilla-extract/css"</span>
</code></pre></div>

<h2 id="%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> テーマの設定</h2>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__71946e6e9b0ee" src="https://embed.zenn.studio/card#zenn-embedded__71946e6e9b0ee" data-content="https%3A%2F%2Fvanilla-extract.style%2Fdocumentation%2Fapi%2Fcreate-theme-contract%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vanilla-extract.style/documentation/api/create-theme-contract/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vanilla-extract.style/documentation/api/create-theme-contract/</a></p>
<p data-line="4" class="code-line">モードの切替に使えそう</p>


<h2 id="recipe" data-line="0" class="code-line">
<a class="header-anchor-link" href="#recipe" aria-hidden="true"></a> Recipe</h2>
<p data-line="2" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__050515ed4b04a" src="https://embed.zenn.studio/card#zenn-embedded__050515ed4b04a" data-content="https%3A%2F%2Fvanilla-extract.style%2Fdocumentation%2Fpackages%2Frecipes" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vanilla-extract.style/documentation/packages/recipes" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vanilla-extract.style/documentation/packages/recipes</a></p>
<ul data-line="4" class="code-line">
<li data-line="4" class="code-line">マルチバリアント
<ul data-line="5" class="code-line">
<li data-line="5" class="code-line">バリアントごとまとめて指定する</li>
</ul>
</li>
<li data-line="6" class="code-line">classNameでそれぞれを指定すると上書きで意図しないスタイルが当たる問題</li>
<li data-line="7" class="code-line">↑を解決する</li>
</ul>
