mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 20:51:21 +08:00
963 lines
217 KiB
HTML
963 lines
217 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>styled-components 备忘清单
|
||
& styled-components cheatsheet & Quick Reference</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta description="此快速参考备忘单提供了使用 CSS in JS 工具的各种方法。为开发人员分享快速参考备忘单。">
|
||
<meta keywords="Quick,Reference,cheatsheet,styled-components">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20opacity%3D%22.4%22%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23777%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../style/style.css">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path opacity=".4" d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="currentColor"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="currentColor"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="currentColor"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/styled-components.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script>
|
||
const LOCAL_NANE = '_dark_mode_theme_'
|
||
const rememberedValue = localStorage.getItem(LOCAL_NANE);
|
||
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
|
||
document.documentElement.setAttribute('data-color-mode', rememberedValue);
|
||
}
|
||
const button = document.querySelector('#darkMode');
|
||
button.onclick = () => {
|
||
const theme = document.documentElement.dataset.colorMode;
|
||
const mode = theme === 'light' ? 'dark' : 'light';
|
||
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-备忘清单"><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="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">
|
||
<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>
|
||
<li><a href="https://github.com/styled-components/vim-styled-components">VIM styled-components</a> <em>有代码高亮</em></li>
|
||
<li><a href="https://github.com/styled-components/webstorm-styled-components">WebStorm styled-components</a> <em>有代码高亮和代码提示</em></li>
|
||
</ul>
|
||
<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">
|
||
<!--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>
|
||
<p>创建一个 Title 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// 该组件将呈现具有样式的 <h1> 标签</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Title</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">h1</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">font-size</span><span class="token punctuation">:</span> <span class="token number">1.5</span><span class="token unit">em</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">text-align</span><span class="token punctuation">:</span> center<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>
|
||
<p>创建一个 Wrapper 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// 该组件将呈现具有某些样式的 <section> 标记</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Wrapper</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">section</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">padding</span><span class="token punctuation">:</span> <span class="token number">4</span><span class="token unit">em</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">background</span><span class="token punctuation">:</span> <span class="token color">papayawhip</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>像使用其他 React 组件一样使用 Title/Wrapper - 除了它们的样式！</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Demo</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Wrapper</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Title</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Hello World!
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Title</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Wrapper</span></span><span class="token punctuation">></span></span>
|
||
</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">
|
||
<!--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">
|
||
</span><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 comment">/* 根据主要 props 调整颜色 */</span>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">background</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"><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>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> props<span class="token punctuation">.</span><span class="token property-access">primary</span> <span class="token operator">?</span> <span class="token string">"blue"</span> <span class="token operator">:</span> <span class="token string">"white"</span>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token interpolation-punctuation punctuation">}</span></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">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"><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>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> props<span class="token punctuation">.</span><span class="token property-access">primary</span> <span class="token operator">?</span> <span class="token string">"white"</span> <span class="token operator">:</span> <span class="token string">"blue"</span>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token interpolation-punctuation punctuation">}</span></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">font-size</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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">margin</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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">padding</span><span class="token punctuation">:</span> <span class="token number">0.25</span><span class="token unit">em</span> <span class="token number">1</span><span class="token unit">em</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">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 property">border-radius</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>primary</code> props 控制按钮样式</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Demo</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">Normal</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">primary</span><span class="token punctuation">></span></span><span class="token plain-text">Primary</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"></</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><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">
|
||
<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>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 基于 Button 的新组件，但具有一些覆盖样式</span>
|
||
</span><span class="code-line highlight-line"><span class="token keyword">const</span> <span class="token maybe-class-name">TomatoButton</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Button</span><span class="token punctuation">)</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">tomato</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-color</span><span class="token punctuation">:</span> <span class="token color">tomato</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><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">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">普通按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TomatoButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">番茄色按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TomatoButton</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<!--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>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0.25</span><span class="token unit">em</span> <span class="token number">1</span><span class="token unit">em</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>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</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">display</span><span class="token punctuation">:</span> block<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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">TomatoButton</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Button</span><span class="token punctuation">)</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">tomato</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-color</span><span class="token punctuation">:</span> <span class="token color">tomato</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><span class="token template-punctuation string">`</span></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 function-variable function"><span class="token maybe-class-name">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">普通按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">href</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 punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 按钮样式的链接
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TomatoButton</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">href</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 punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 番茄按钮样式的链接
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TomatoButton</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<!--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>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">display</span><span class="token punctuation">:</span> block<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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">ReversedButton</span></span> <span class="token operator">=</span> <span class="token parameter">props</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"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">children</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">普通按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">as</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">ReversedButton</span><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><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<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"><</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">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">StyledLink</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Link</span><span class="token punctuation">)</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">font-weight</span><span class="token punctuation">:</span> bold<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><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">
|
||
<!--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>
|
||
</span><span class="code-line highlight-line"> <span class="token comment">// ⚠️ 不能在这里定义 styled 组件</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</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>message<span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>
|
||
</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 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">
|
||
<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>
|
||
</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"> props<span class="token punctuation">.</span><span class="token property-access">inputColor</span> <span class="token operator">||</span> <span class="token string">"palevioletred"</span>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token interpolation-punctuation punctuation">}</span></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">background</span><span class="token punctuation">:</span> <span class="token color">papayawhip</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><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">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@probablyup<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@geelen<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">inputColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rebeccapurple<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<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>
|
||
</span><span class="code-line"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'50px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line highlight-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'12px'</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>在组件中使用</p>
|
||
<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">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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 keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">PropsBox</span></span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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 tag"><span class="token tag"><span class="token punctuation"></</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><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">
|
||
<!--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>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ExampleCounter</span></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">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>styles<span class="token punctuation">.</span><span class="token property-access">counter</span><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 tag"><span class="token tag"><span class="token punctuation"><</span>p</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>styles<span class="token punctuation">.</span><span class="token property-access">paragraph</span><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>count<span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</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 tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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>styles<span class="token punctuation">.</span><span class="token property-access">button</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> +
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</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 tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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>styles<span class="token punctuation">.</span><span class="token property-access">button</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> -
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</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 tag"><span class="token tag"><span class="token punctuation"></</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><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">
|
||
<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">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token comment">/* ... */</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><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Paragraph</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">p</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 comment">/* ... */</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><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 comment">/* ... */</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><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ExampleCounter</span></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">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</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 function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">decrement</span> <span class="token operator">=</span> <span class="token punctuation">(</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 function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">StyledCounter</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Paragraph</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Paragraph</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>increment<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><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>decrement<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><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">StyledCounter</span></span><span class="token punctuation">></span></span>
|
||
</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">
|
||
<!--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;
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> &:hover { /* <Thing> 悬停时 */
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> color: red;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> & ~ & { /* <Thing> 作为 <Thing> 的兄弟，但可能不直接在它旁边 */
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> background: tomato;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> & + & { /* <Thing> 旁边的 <Thing> */
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> background: lime;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> &.something { /* <Thing> 标记有一个额外的 CSS 类 “.something” */
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> background: orange;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> .something-else & { /* <Thing> 在另一个标记为 “.something-else” 的元素中 */
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> border: 1px solid;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><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><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.Fragment</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Thing</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello world!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Thing</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Thing</span></span><span class="token punctuation">></span></span><span class="token plain-text">你怎么样？</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Thing</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Thing</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>something<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><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Thing</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 tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">今天真是美好的一天。</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Thing</span></span><span class="token punctuation">></span></span><span class="token plain-text">你不觉得吗？</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Thing</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 tag"><span class="token tag"><span class="token punctuation"><</span>div</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>something-else<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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Thing</span></span><span class="token punctuation">></span></span><span class="token plain-text">灿烂</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Thing</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 tag"><span class="token tag"><span class="token punctuation"></</span>div</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<!--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>
|
||
</span><span class="code-line">
|
||
</span><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 punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"checkbox"</span>
|
||
</span><span class="code-line"><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 template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">LabelText</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">span</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 interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token property-access">$mode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token keyword">case</span> <span class="token string">"dark"</span><span class="token operator">:</span>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token keyword control-flow">return</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><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">white</span><span class="token punctuation">;</span>
|
||
</span></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 template-string"><span class="token css language-css"> <span class="token selector"><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">Input</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token pseudo-class">:checked</span> <span class="token combinator">+</span> &&</span> <span class="token punctuation">{</span>
|
||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><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></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><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></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token keyword module">default</span><span class="token operator">:</span>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token keyword control-flow">return</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><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">black</span><span class="token punctuation">;</span>
|
||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token selector"><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">Input</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token pseudo-class">:checked</span> <span class="token combinator">+</span> &&</span> <span class="token punctuation">{</span>
|
||
</span></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 template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token punctuation">}</span>
|
||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><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></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token punctuation">}</span>
|
||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token interpolation-punctuation punctuation">}</span></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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.Fragment</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Label</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span> <span class="token attr-name">defaultChecked</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LabelText</span></span><span class="token punctuation">></span></span><span class="token plain-text">Foo</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">LabelText</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Label</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Label</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LabelText</span></span> <span class="token attr-name">$mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark<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"> Foo
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">LabelText</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Label</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 tag"><span class="token tag"><span class="token punctuation"></</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><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">
|
||
<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
|
||
</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>
|
||
</span><span class="code-line">
|
||
</span><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 selector">&&</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">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 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><span class="code-line highlight-line"><span class="token keyword">const</span> <span class="token maybe-class-name">GlobalStyle</span> <span class="token operator">=</span> createGlobalStyle<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">div<span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">Thing</span><span class="token interpolation-punctuation punctuation">}</span></span></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">color</span><span class="token punctuation">:</span> <span class="token color">red</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 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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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"><</span><span class="token class-name">React.Fragment</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">GlobalStyle</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Thing</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><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Thing</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<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">/* <Thing> 中标记为“.something”的元素 */</span>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token selector"><span class="token class">.something</span></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">1</span><span class="token unit">px</span> solid<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 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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Thing</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 tag"><span class="token tag"><span class="token punctuation"><</span>label</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">htmlFor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo-button<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>something<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 神秘按钮
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</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 tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo-button<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><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Thing</span></span><span class="token punctuation">></span></span>
|
||
</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">
|
||
<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>
|
||
</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><span class="code-line"><span class="token comment">// ❌ 这将引发错误！</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</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"> animation: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rotate<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 2s linear infinite;
|
||
</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><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// ✅ 这将按预期工作</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> css<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">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">
|
||
<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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||
</span></span><span class="code-line highlight-line"><span class="token tag"> <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><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">className</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</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><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">StyledA</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">NewHeader</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>
|
||
</span><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></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token selector"><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">StyledA</span><span class="token interpolation-punctuation punctuation">}</span></span></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">/* 变更 NewHeader 样式 */</span>
|
||
</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">
|
||
<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>
|
||
</span><span class="code-line"> <span class="token comment">// 或者我们可以定义动态的</span>
|
||
</span><span class="code-line highlight-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>
|
||
</span><span class="code-line"><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: palevioletred;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> font-size: 1em;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> border: 2px solid palevioletred;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> border-radius: 3px;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> /* 这里我们使用动态计算的 props */
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> margin: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">size</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
|
||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> padding: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">size</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>
|
||
<p>使用 <code>Input</code> 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span> <span class="token attr-name">placeholder</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 punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</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></span><span class="code-line"><span class="token tag"> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2em<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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 tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</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">
|
||
<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>
|
||
</span><span class="code-line"><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"> border: 2px solid palevioletred;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> margin: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">size</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"> padding: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">size</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><span class="code-line"><span class="token comment">// Input 的attrs会先被应用，然后这个 attrs obj</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">PasswordInput</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Input</span><span class="token punctuation">)</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><span class="code-line highlight-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"password"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><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 css language-css">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token comment">/* 同样，border 将覆盖 Input 的边框 */</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">aqua</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>Input</code> 和 <code>PasswordInput</code> 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</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></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2em<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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 tag"><span class="token tag"><span class="token punctuation"><</span>br</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><span class="token comment">/*⚠️ 仍然可以使用Input中的 size attr*/</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">PasswordInput</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</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></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2em<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<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>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token unit">deg</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 punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><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">to</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">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">360</span><span class="token unit">deg</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 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>
|
||
<p>我们创建一个 <code>Rotate</code> 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// 它将在两秒内旋转我们传递的所有内容</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Rotate</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">display</span><span class="token punctuation">:</span> inline-block<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">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 class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">rem</span> <span class="token number">1</span><span class="token unit">rem</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">font-size</span><span class="token punctuation">:</span> <span class="token number">1.2</span><span class="token unit">rem</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>Rotate</code> 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Rotate</span></span><span class="token punctuation">></span></span><span class="token plain-text">&lt; 💅🏾 &gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Rotate</span></span><span class="token punctuation">></span></span>
|
||
</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">
|
||
<!--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>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">MaybeStyledComponent</span></span> <span class="token keyword module">from</span> <span class="token string">'./my'</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">let</span> <span class="token maybe-class-name">TargetedComponent</span> <span class="token operator">=</span> <span class="token function">isStyledComponent</span><span class="token punctuation">(</span><span class="token maybe-class-name">MaybeStyledComponent</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token operator">?</span> <span class="token maybe-class-name">MaybeStyledComponent</span>
|
||
</span><span class="code-line"> <span class="token operator">:</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">MaybeStyledComponent</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></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">ParentComponent</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">cornflowerblue</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></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token selector"><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">TargetedComponent</span><span class="token interpolation-punctuation punctuation">}</span></span></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">color</span><span class="token punctuation">:</span> <span class="token color">tomato</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 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">
|
||
<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>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeConsumer</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><span class="token parameter">theme</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"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">主题色是 </span><span class="token punctuation">{</span>theme<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</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 class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ThemeConsumer</span></span><span class="token punctuation">></span></span>
|
||
</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">
|
||
<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>
|
||
<p>React Native 应用上安装 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> <span class="token punctuation">\</span>
|
||
</span><span class="code-line"> @types/styled-components <span class="token punctuation">\</span>
|
||
</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">
|
||
<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>
|
||
</span><span class="code-line"> <span class="token keyword">readonly</span> isActive<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><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">Title</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">h1</span><span class="token operator"><</span><span class="token maybe-class-name">TitleProps</span><span class="token operator">></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: </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> <span class="token punctuation">(</span>
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token interpolation"> props<span class="token punctuation">.</span>isActive
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token interpolation"> <span class="token operator">?</span> props<span class="token punctuation">.</span>theme<span class="token punctuation">.</span>colors<span class="token punctuation">.</span>main
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token interpolation"> <span class="token operator">:</span> props<span class="token punctuation">.</span>theme<span class="token punctuation">.</span>colors<span class="token punctuation">.</span>secondary
|
||
</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">
|
||
<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">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Header</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">header</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"> font-size: 12px;
|
||
</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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">NewHeader</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Header</span><span class="token punctuation">)</span><span class="token operator"><</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> customColor<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token operator">></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: </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">
|
||
<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">
|
||
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">ReHeader</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line highlight-line"> $customColor<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><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">ReHeader</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Header</span><span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ReHeader</span></span><span class="token punctuation">></span></span><span class="token plain-text">`
|
||
</span></span><span class="code-line"><span class="token plain-text"> color: ${
|
||
</span></span><span class="code-line"><span class="token plain-text"> props => props.$customColor
|
||
</span></span><span class="code-line"><span class="token plain-text"> };
|
||
</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">
|
||
<!--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>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Img</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">img</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"> height: 32px;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> width: 32px;
|
||
</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><span class="code-line highlight-line"><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">ImageProps</span> <span class="token keyword">extends</span> <span class="token class-name">DetailedHTMLProps<span class="token operator"><</span>
|
||
</span></span><span class="code-line"><span class="token class-name"> ImgHTMLAttributes<span class="token operator"><</span>HTMLImageElement<span class="token operator">></span><span class="token punctuation">,</span> HTMLImageElement
|
||
</span></span><span class="code-line"><span class="token class-name"><span class="token operator">></span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> text<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line highlight-line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Image</span><span class="token operator">:</span> <span class="token constant">FC</span><span class="token operator"><</span><span class="token maybe-class-name">PropsWithRef</span><span class="token operator"><</span><span class="token maybe-class-name">ImageProps</span><span class="token operator">>></span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<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"><</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">
|
||
<!--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">
|
||
<!--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>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">StyledView</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">View</span></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">background-color</span><span class="token punctuation">:</span> <span class="token color">papayawhip</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><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 maybe-class-name">StyledText</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">MyReactNativeComponent</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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">StyledView</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">StyledText</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello World!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">StyledText</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">StyledView</span></span><span class="token punctuation">></span></span>
|
||
</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><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">
|
||
<!--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">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">RotatedBox</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">View</span></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">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">90</span><span class="token unit">deg</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 property">text-shadow-offset</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token number">5</span><span class="token unit">px</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">font-variant</span><span class="token punctuation">:</span> small-caps<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">margin</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span> <span class="token number">7</span><span class="token unit">px</span> <span class="token number">2</span><span class="token unit">px</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RotatedBox</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span>
|
||
</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">
|
||
<!--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">
|
||
<!--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">
|
||
</span><span class="code-line"><span class="token comment">// 定义我们的按钮，但这次使用 props.theme</span>
|
||
</span><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">font-size</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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">margin</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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">padding</span><span class="token punctuation">:</span> <span class="token number">0.25</span><span class="token unit">em</span> <span class="token number">1</span><span class="token unit">em</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-radius</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</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></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token comment">/* 使用 theme.main 为边框和文本着色 */</span>
|
||
</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 class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">.</span><span class="token property-access">main</span><span class="token interpolation-punctuation punctuation">}</span></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 interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">.</span><span class="token property-access">main</span><span class="token interpolation-punctuation punctuation">}</span></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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 我们正在为未包装在 ThemeProvider 中的按钮传递默认主题</span>
|
||
</span><span class="code-line"><span class="token maybe-class-name">Button</span><span class="token punctuation">.</span><span class="token property-access">defaultProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">"palevioletred"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 定义 props.theme 的外观</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">"mediumseagreen"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">Normal</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">Themed</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ThemeProvider</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<!--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">
|
||
</span><span class="code-line"><span class="token comment">// 定义我们的按钮，但这次使用 props.theme</span>
|
||
</span><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 interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">.</span><span class="token property-access">fg</span><span class="token interpolation-punctuation punctuation">}</span></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 interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">.</span><span class="token property-access">fg</span><span class="token interpolation-punctuation punctuation">}</span></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">background</span><span class="token punctuation">:</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">.</span><span class="token property-access">bg</span><span class="token interpolation-punctuation punctuation">}</span></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></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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">margin</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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">padding</span><span class="token punctuation">:</span> <span class="token number">0.25</span><span class="token unit">em</span> <span class="token number">1</span><span class="token unit">em</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-radius</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 在主题上定义我们的`fg`和`bg`</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fg</span><span class="token operator">:</span> <span class="token string">"palevioletred"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">bg</span><span class="token operator">:</span> <span class="token string">"white"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 这个主题交换了`fg`和`bg`</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">invertTheme</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> fg<span class="token punctuation">,</span> bg <span class="token punctuation">}</span></span><span class="token punctuation">)</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">fg</span><span class="token operator">:</span> bg<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">bg</span><span class="token operator">:</span> fg
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<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 tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">默认主题</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>invertTheme<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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">反转主题</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ThemeProvider</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 tag"><span class="token tag"><span class="token punctuation"></</span>div</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<!--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">
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">MyComponent</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 console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Current theme: '</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</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">
|
||
<!--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>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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 keyword">const</span> themeContext <span class="token operator">=</span> <span class="token function">useContext</span><span class="token punctuation">(</span><span class="token maybe-class-name">ThemeContext</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Current theme: '</span><span class="token punctuation">,</span> themeContext<span class="token punctuation">)</span>
|
||
</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">
|
||
<!--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">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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 keyword">const</span> theme <span class="token operator">=</span> <span class="token function">useTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Current theme: '</span><span class="token punctuation">,</span> theme<span class="token punctuation">)</span>
|
||
</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">
|
||
<!--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>
|
||
</span></span><span class="code-line"><span class="token imports"> styled
|
||
</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><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 定义我们的按钮</span>
|
||
</span><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">font-size</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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">margin</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</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">padding</span><span class="token punctuation">:</span> <span class="token number">0.25</span><span class="token unit">em</span> <span class="token number">1</span><span class="token unit">em</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">/* 使用 theme.main 为边框和文本着色 */</span>
|
||
</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 class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">.</span><span class="token property-access">main</span><span class="token interpolation-punctuation punctuation">}</span></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 interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">.</span><span class="token property-access">main</span><span class="token interpolation-punctuation punctuation">}</span></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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 定义主题的外观</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">"mediumseagreen"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>使用自定义主题组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">"royalblue"</span> <span class="token punctuation">}</span><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><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<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 tag"><span class="token tag"><span class="token punctuation"><</span>div</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">Themed</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">"darkorange"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 被覆盖
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</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 tag"><span class="token tag"><span class="token punctuation"></</span>div</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 tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ThemeProvider</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<!--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>
|
||
</span></span><span class="code-line"><span class="token imports"> styled
|
||
</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><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">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">border</span><span class="token punctuation">:</span> none<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-radius</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">class</span> <span class="token class-name">Form</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">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">inputRef</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">inputRef</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hover to focus!<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onMouseEnter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">inputRef</span><span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</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><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>Form</code> 组件</p>
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></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>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Form</span></span> <span class="token punctuation">/></span></span>
|
||
</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">
|
||
<!--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">
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">green</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><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>定义样式 <code>my-component.css</code></p>
|
||
<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> <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>
|
||
<p>使用 <code>MyComponent</code> 组件</p>
|
||
<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"><</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">
|
||
<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">
|
||
<!--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">
|
||
</span><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></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 class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">theme</span><span class="token punctuation">.</span><span class="token property-access">color</span><span class="token interpolation-punctuation punctuation">}</span></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><span class="token template-punctuation string">`</span></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 function-variable function"><span class="token maybe-class-name">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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"><</span><span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'mediumseagreen'</span> <span class="token punctuation">}</span><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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span><span class="token plain-text">I'm mediumseagreen!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Box</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 tag"><span class="token tag"><span class="token punctuation"></</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">
|
||
<!--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>
|
||
</span><span class="code-line"> <span class="token operator">!</span><span class="token punctuation">[</span><span class="token string">'hidden'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method function property-access">includes</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token function">defaultValidatorFn</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</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 literal-property property">className</span><span class="token operator">:</span> <span class="token string">'foo'</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: red;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> &.foo {
|
||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> text-decoration: underline;
|
||
</span></span></span><span class="code-line"><span class="token template-string"><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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</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"><</span><span class="token class-name">Comp</span></span> <span class="token attr-name">hidden</span> <span class="token attr-name">draggable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<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"> Drag Me!
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Comp</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></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||
</html>
|