mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
936 lines
175 KiB
HTML
936 lines
175 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>StyleX 备忘清单
|
||
& stylex cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="这是 StyleX 用户界面的样式系统的快速参考指南备忘单
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="stylex,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</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 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="#c9d1d9"></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="#228e6c"></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="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/stylex.md" class="edit" 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 src="../js/dark.js?v=1.8.3"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="stylex-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 151 180"><g fill="none"><path fill="#5BD3F3" d="M123.054863 93.4254443C124.041858 95.7626109 128.450105 105.044084 129.355779 107.321152 123.84289 116.561307 122.549601 118.95899 111.024753 133.60593 64.1232983 182.705627 27.9371992 190.639891 5.76263041 167.701852 3.59627766 165.361764 1.67512566 162.319274 0 158.574382.471825684 159.433291 1.09514745 160.379843 1.86996531 161.414039L2.15025371 161.78256C2.19772524 161.844746 2.24602235 161.906931 2.29473227 161.969534L2.59359648 162.349323 2.90484457 162.735791 3.22888933 163.12977 3.56531797 163.530845 3.91454328 163.939431 4.27615246 164.355113 4.65014553 164.77789 5.03734806 165.208179 5.23549007 165.426036 5.64126842 165.867176 5.84890474 166.090459 6.2732589 166.542451 6.49038953 166.771159C33.8818726 191.84228 61.2048315 170.332834 98.3027967 128.773838 103.902786 122.190123 112.153337 110.407464 123.054863 93.4254443ZM137.380118 14.1032604C154.739423 29.1884191 154.739423 52.5968124 141.717364 86.0295639 140.719637 83.5713654 136.323774 73.7444144 135.221609 71.226952 145.472981 42.8320467 145.710752 29.3332399 130.967334 15.8715774 122.485617 8.12762615 116.462513 7.80876984 104.995043 9.69477985L104.244168 9.82123726C104.118678 9.84252217 103.992775 9.86464178 103.866872 9.8867614L103.107328 10.0236526 102.342004 10.1663867 101.956866 10.2402579 92.9145722 12.0507273 92.9145722 12.0340333 93.1139526 11.9605794C111.260459 5.27670019 126.843916 4.74249067 137.380118 14.1032604L137.380118 14.1032604Z"></path><path fill="#D573DE" d="M125.890167,63.5141248 C153.449324,115.583313 155.188797,143.75817 146.009025,163.468062 C142.702042,170.570383 134.455253,175.478804 130.907687,177.387749 C122.003636,182.178957 103.568032,179.793293 87.0876824,174.955283 L84.6173661,173.901615 C92.8984649,176.570162 110.89548,180.056296 120.598168,177.387749 C152.463016,168.623747 148.671973,130.669324 116.64467,71.0621007 C84.6173661,11.4548774 49.5757474,-4.8960329 21.9537585,6.3426811 C19.3015581,7.42161421 16.9891503,8.8960871 15,10.7226111 L15.212887,10.4952275 L15.6399012,10.0462588 L15.853615,9.82508786 L16.282696,9.38854448 C19.3635641,6.29215141 22.5576963,3.87542408 25.8493845,2.76294257 C50.8282672,-5.6788289 93.7099159,2.71324123 125.890167,63.5141248 Z"></path></g></svg><a aria-hidden="true" tabindex="-1" href="#stylex-备忘清单"><span class="icon icon-link"></span></a>StyleX 备忘清单</h1><div class="wrap-body">
|
||
<p>这是 <a href="https://github.com/facebook/stylex">StyleX</a> 用户界面的样式系统的快速参考指南备忘单</p>
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门-stylex">入门 StyleX</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#介绍">介绍</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#vite">Vite</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#babel-插件">Babel 插件</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#prettier">Prettier</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#bun">Bun</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#入门模板">入门模板</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#配置编译器">配置编译器</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用样式">使用样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定义样式">定义样式</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#安装">安装</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stylex-运行时包">StyleX 运行时包</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#编译器生产-rollup">编译器(生产) Rollup</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#编译器开发">编译器(开发)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#编译器生产-webpack">编译器(生产) Webpack</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#编译器生产-nextjs">编译器(生产) Next.js</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#仅限本地开发">仅限本地开发</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#用-eslint-捕捉错误">用 ESLint 捕捉错误</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#定义样式-1">定义样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建样式">创建样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#伪类">伪类</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#伪元素">伪元素</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#媒体查询和其他规则">媒体查询（和其他@规则）</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#组合条件">组合条件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#后备样式">后备样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#关键帧动画">关键帧动画</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动态样式">动态样式</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#使用样式-1">使用样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#合并样式">合并样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#条件样式">条件样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#样式变体">样式变体</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#样式作为道具">样式作为道具</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#接受组件中的样式">接受组件中的样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#取消设置样式">“取消设置”样式</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#主题">主题</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用媒体查询">使用媒体查询</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定义变量">定义变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用变量">使用变量</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定义变量时的规则">定义变量时的规则</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建主题">创建主题</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#变量类型">变量类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#变量类型--条件值">变量类型 & 条件值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#源代码中的类型安全">源代码中的类型安全</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动画渐变">动画渐变</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#模拟-round">模拟 round()</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#typescript-类型">TypeScript 类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stylexstyles-样式-props-类型">StyleXStyles 样式 props 类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stylexstyleswithout-禁止属性">StyleXStylesWithout 禁止属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#从一组样式属性中接受">从一组样式属性中接受</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#限制样式的可能值">限制样式的可能值</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#vargroup">VarGroup</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#staticstyles">StaticStyles</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#theme">Theme</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门-stylex"><a aria-hidden="true" tabindex="-1" href="#入门-stylex"><span class="icon icon-link"></span></a>入门 StyleX</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<p>StyleX 是一个 CSS In JS 的用户界面的样式系统</p>
|
||
<ul>
|
||
<li><a href="https://marketplace.visualstudio.com/items?itemName=yash-singh.stylex">StyleX Intellisense</a> <em>VSCode 插件</em></li>
|
||
</ul>
|
||
<h4 style="text-align: left;color: var(--primary-color)" id="vite"><a aria-hidden="true" tabindex="-1" href="#vite"><span class="icon icon-link"></span></a>Vite</h4>
|
||
<!--rehype:style=text-align: left;color: var(--primary-color)-->
|
||
<ul>
|
||
<li><a href="https://www.npmjs.com/package/vite-plugin-stylex">vite-plugin-stylex</a></li>
|
||
<li><a href="https://www.npmjs.com/package/vite-plugin-stylex-dev">vite-plugin-stylex-dev</a></li>
|
||
</ul>
|
||
<h4 style="text-align: left;color: var(--primary-color)" id="babel-插件"><a aria-hidden="true" tabindex="-1" href="#babel-插件"><span class="icon icon-link"></span></a>Babel 插件</h4>
|
||
<!--rehype:style=text-align: left;color: var(--primary-color)-->
|
||
<ul>
|
||
<li><a href="https://www.npmjs.com/package/tailwind-to-stylex">tailwind-to-stylex</a> 支持在 Tailwind CSS 中使用</li>
|
||
<li><a href="https://github.com/nonzzz/stylex-extend/tree/main/packages/babel-plugin">@stylex-extend/babel-plugin</a> 使用 JSX 属性定义 StyleX</li>
|
||
</ul>
|
||
<h4 style="text-align: left;color: var(--primary-color)" id="prettier"><a aria-hidden="true" tabindex="-1" href="#prettier"><span class="icon icon-link"></span></a>Prettier</h4>
|
||
<!--rehype:style=text-align: left;color: var(--primary-color)-->
|
||
<ul>
|
||
<li><a href="https://github.com/nedjulius/prettier-plugin-stylex-key-sort">prettier-plugin-stylex-key-sort</a></li>
|
||
</ul>
|
||
<h4 style="text-align: left;color: var(--primary-color)" id="bun"><a aria-hidden="true" tabindex="-1" href="#bun"><span class="icon icon-link"></span></a>Bun</h4>
|
||
<!--rehype:style=text-align: left;color: var(--primary-color)-->
|
||
<ul>
|
||
<li><a href="https://www.npmjs.com/package/bun-plugin-stylex">bun-plugin-stylex</a></li>
|
||
</ul>
|
||
<h4 style="text-align: left;color: var(--primary-color)" id="入门模板"><a aria-hidden="true" tabindex="-1" href="#入门模板"><span class="icon icon-link"></span></a>入门模板</h4>
|
||
<!--rehype:style=text-align: left;color: var(--primary-color)-->
|
||
<ul>
|
||
<li><a href="https://github.com/nmn/nextjs-app-dir-stylex">next.js</a> <em>支持 StyleX 的 next.js 项目</em></li>
|
||
<li><a href="https://github.com/nmn/qwik-stylex">qwik</a> <em>使用 StyleX 和 tailwind-to-stylex 的 Qwik 项目</em></li>
|
||
<li><a href="https://github.com/nmn/docusaurus-stylex">docusaurus 3</a> <em>支持 StyleX 的 docusaurus 3 项目</em></li>
|
||
<li><a href="https://github.com/nmn/sveltekit-stylex">SvelteKit</a> <em>支持 StyleX 的 SvelteKit 项目</em></li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="配置编译器"><a aria-hidden="true" tabindex="-1" href="#配置编译器"><span class="icon icon-link"></span></a>配置编译器</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">plg</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/rollup-plugin'</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">config</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 class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token function">plg</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token spread operator">...</span>options <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 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> config<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="使用样式"><a aria-hidden="true" tabindex="-1" href="#使用样式"><span class="icon icon-link"></span></a>使用样式</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> <span class="token maybe-class-name">React</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"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token spread operator">...</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> colorStyles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token spread operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>在 <a href="./react.html">React</a> 中使用</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">ReactDemo</span></span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token parameter"><span class="token punctuation">{</span> color<span class="token punctuation">,</span>isActive<span class="token punctuation">,</span>style <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 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 spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> styles<span class="token punctuation">.</span><span class="token property-access">main</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> <span class="token comment">// 有条件地应用样式</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> isActive <span class="token operator">&&</span> styles<span class="token punctuation">.</span><span class="token property-access">active</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> <span class="token comment">// 根据属性选择样式变体</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> colorStyles<span class="token punctuation">[</span>color<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> <span class="token comment">// 将样式作为 props 传递</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> style<span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> <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></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="定义样式"><a aria-hidden="true" tabindex="-1" href="#定义样式"><span class="icon icon-link"></span></a>定义样式</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">root</span><span class="token operator">:</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">'100%'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">maxWidth</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">minHeight</span><span class="token operator">:</span> <span class="token number">40</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"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>样式是使用对象语法和 <code>create()</code> API 定义的</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="安装"><a aria-hidden="true" tabindex="-1" href="#安装"><span class="icon icon-link"></span></a>安装</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-4-->
|
||
</div></div><div class="h2wrap-body cols-4"><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="stylex-运行时包"><a aria-hidden="true" tabindex="-1" href="#stylex-运行时包"><span class="icon icon-link"></span></a>StyleX 运行时包</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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> @stylexjs/stylex
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="编译器生产-rollup"><a aria-hidden="true" tabindex="-1" href="#编译器生产-rollup"><span class="icon icon-link"></span></a>编译器(生产) Rollup</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<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> --save-dev @stylexjs/rollup-plugin
|
||
</span></code></pre>
|
||
<p>修改 Rollup 配置 <em>rollup.config.js</em></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">stylexPlugin</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/rollup-plugin'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token string">'./index.js'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">file</span><span class="token operator">:</span> <span class="token string">'./.build/bundle.js'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">'es'</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"> <span class="token comment">// 确保在 Babel 之前使用 stylex 插件</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">stylexPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 必需项。生成的 CSS 文件的文件路径。</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fileName</span><span class="token operator">:</span> <span class="token string">'./.build/stylex.css'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 默认值：false</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">dev</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 所有生成的类名的前缀</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">classNamePrefix</span><span class="token operator">:</span> <span class="token string">'x'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// CSS 变量支持所必需</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">unstable_moduleResolution</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 类型：'commonJS' | 'haste'</span>
|
||
</span><span class="code-line"> <span class="token comment">// 默认值：'commonJS'</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'commonJS'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 项目根目录的绝对路径</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">rootDir</span><span class="token operator">:</span> __dirname<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"> <span class="token punctuation">}</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 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> config<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="编译器开发"><a aria-hidden="true" tabindex="-1" href="#编译器开发"><span class="icon icon-link"></span></a>编译器(开发)</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span> <span class="token function">install</span> --save-dev @stylexjs/babel-plugin
|
||
</span></code></pre>
|
||
<p>修改 Babel 配置 <em>(babel.config.js)</em></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">styleX</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/babel-plugin'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>styleX<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">dev</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 设置为 true 以进行快照测试</span>
|
||
</span><span class="code-line"> <span class="token comment">// 默认值：false</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// CSS 变量支持所必需</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">unstable_moduleResolution</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 类型：'commonJS' | 'haste'</span>
|
||
</span><span class="code-line"> <span class="token comment">// 默认值：'commonJS'</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'commonJS'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 项目根目录的绝对路径</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">rootDir</span><span class="token operator">:</span> __dirname<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 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><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 keyword module">export</span> <span class="token keyword module">default</span> config<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="编译器生产-webpack"><a aria-hidden="true" tabindex="-1" href="#编译器生产-webpack"><span class="icon icon-link"></span></a>编译器(生产) Webpack</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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> --save-dev @stylexjs/webpack-plugin
|
||
</span></code></pre>
|
||
<p>修改 Webpack 配置 <em>webpack.config.js</em></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">StylexPlugin</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@stylexjs/webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</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">config</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">env<span class="token punctuation">,</span> argv</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">entry</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">'./src/index.js'</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"> <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'.build'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">'[name].js'</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"> <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><span class="token special-escape escape">\.</span>js<span class="token anchor function">$</span></span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token string">'babel-loader'</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"> <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><span class="code-line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token comment">// 确保在 Babel 之前使用 stylex 插件</span>
|
||
</span><span class="code-line"> <span class="token keyword">new</span> <span class="token class-name">StylexPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">'styles.[contenthash].css'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 获取 webpack 的模式并为开发设置值</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">dev</span><span class="token operator">:</span> argv<span class="token punctuation">.</span><span class="token property-access">mode</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 使用静态生成的 CSS 文件，而不是运行时注入的 CSS。</span>
|
||
</span><span class="code-line"> <span class="token comment">// 即使在开发环境中也是如此。</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">runtimeInjection</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 可选的。默认值：'x'</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">classNamePrefix</span><span class="token operator">:</span> <span class="token string">'x'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// CSS 变量支持所必需</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">unstable_moduleResolution</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 类型：'commonJS' | 'haste'</span>
|
||
</span><span class="code-line"> <span class="token comment">// 默认值：'commonJS'</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'commonJS'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 项目根目录的绝对路径</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">rootDir</span><span class="token operator">:</span> __dirname<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"> <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 class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token boolean">true</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><span class="code-line">
|
||
</span><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> config<span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="编译器生产-nextjs"><a aria-hidden="true" tabindex="-1" href="#编译器生产-nextjs"><span class="icon icon-link"></span></a>编译器(生产) Next.js</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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> --save-dev @stylexjs/nextjs-plugin <span class="token punctuation">\</span>
|
||
</span><span class="code-line"> @stylexjs/babel-plugin rimraf
|
||
</span></code></pre>
|
||
<p>在 <code>package.json</code> 添加配置</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token spread operator">...</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"predev"</span><span class="token operator">:</span> <span class="token string">"rimraf .next"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"prebuild"</span><span class="token operator">:</span> <span class="token string">"rimraf .next"</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>修改 Babel 配置 <em>.babelrc.js</em></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next/babel"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token string">"@stylexjs/babel-plugin"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">dev</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">test</span><span class="token operator">:</span> process<span class="token punctuation">.</span><span class="token property-access">env</span><span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">"test"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">runtimeInjection</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">genConditionalClasses</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">treeshakeCompensation</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">unstable_moduleResolution</span><span class="token operator">:</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">"commonJS"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">rootDir</span><span class="token operator">:</span> __dirname<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"> <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><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>修改 Next.js 配置 <em>next.config.mjs</em></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token doc-comment comment">/** <span class="token keyword">@type</span> <span class="token class-name"><span class="token punctuation">{</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'next'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>NextConfig<span class="token punctuation">}</span></span> */</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">stylexPlugin</span> <span class="token keyword module">from</span> <span class="token string">"@stylexjs/nextjs-plugin"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> nextConfig <span class="token operator">=</span> <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 keyword">const</span> __dirname <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">URL</span><span class="token punctuation">(</span><span class="token string">"."</span><span class="token punctuation">,</span> <span class="token keyword module">import</span><span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">url</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">pathname</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">stylexPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">rootDir</span><span class="token operator">:</span> __dirname<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>nextConfig<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="仅限本地开发"><a aria-hidden="true" tabindex="-1" href="#仅限本地开发"><span class="icon icon-link"></span></a>仅限本地开发</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<p>要开始使用 <code>StyleX</code> 而无需配置编译器和构建过程，您可以安装本地开发运行时</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> --save-dev @stylexjs/dev-runtime
|
||
</span></code></pre>
|
||
<p>开发运行时必须导入到应用程序的 <code>JavaScript</code> 入口点并进行配置</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">inject</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/dev-runtime'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function">inject</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">classNamePrefix</span><span class="token operator">:</span> <span class="token string">'x'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">dev</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token boolean">false</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></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="用-eslint-捕捉错误"><a aria-hidden="true" tabindex="-1" href="#用-eslint-捕捉错误"><span class="icon icon-link"></span></a>用 ESLint 捕捉错误</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<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> --save-dev @stylexjs/eslint-plugin
|
||
</span></code></pre>
|
||
<p>StyleX 编译器不会验证您的样式，并且会编译许多无效样式。当您创作样式时，您应该使用 ESLint 插件来捕获这些错误。修改 ESLint 配置 <code>.eslintrc.js</code></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"@stylexjs"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string-property property">"@stylexjs/valid-styles"</span><span class="token operator">:</span> <span class="token string">"error"</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"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="定义样式-1"><a aria-hidden="true" tabindex="-1" href="#定义样式-1"><span class="icon icon-link"></span></a>定义样式</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="创建样式"><a aria-hidden="true" tabindex="-1" href="#创建样式"><span class="icon icon-link"></span></a>创建样式</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">1.5</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgb(60,60,60)'</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"> <span class="token literal-property property">highlighted</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rebeccapurple'</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"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="伪类"><a aria-hidden="true" tabindex="-1" href="#伪类"><span class="icon icon-link"></span></a>伪类</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">button</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'lightblue'</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"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>样式名为 <code>button</code> 的背景样式上添加 <code>:hover</code> 和 <code>:active</code> 伪类</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">button</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'lightblue'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">':hover'</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">':active'</span><span class="token operator">:</span> <span class="token string">'darkblue'</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"> <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></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="伪元素"><a aria-hidden="true" tabindex="-1" href="#伪元素"><span class="icon icon-link"></span></a>伪元素</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 伪元素</span>
|
||
</span><span class="code-line"> <span class="token string-property property">'::placeholder'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#999'</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"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 伪类</span>
|
||
</span><span class="code-line"> <span class="token string-property property">':invalid'</span><span class="token operator">:</span> <span class="token string">'red'</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"> <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></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="媒体查询和其他规则"><a aria-hidden="true" tabindex="-1" href="#媒体查询和其他规则"><span class="icon icon-link"></span></a>媒体查询（和其他@规则）</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">base</span><span class="token operator">:</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 punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">'@media (max-width: 800px)'</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">'@media (min-width: 1540px)'</span><span class="token operator">:</span> <span class="token number">1366</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"> <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></code></pre>
|
||
<p>同样，媒体查询也可以作为样式值中的 "条件"</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合条件"><a aria-hidden="true" tabindex="-1" href="#组合条件"><span class="icon icon-link"></span></a>组合条件</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">button</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'var(--blue-link)'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">':hover'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">'@media (hover: hover)'</span><span class="token operator">:</span> <span class="token string">'scale(1.1)'</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"> <span class="token string-property property">':active'</span><span class="token operator">:</span> <span class="token string">'scale(0.9)'</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"> <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></code></pre>
|
||
<p>当您需要组合媒体查询和伪选择器时，嵌套超过<code>一层</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="后备样式"><a aria-hidden="true" tabindex="-1" href="#后备样式"><span class="icon icon-link"></span></a>后备样式</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.header</span></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">position</span><span class="token punctuation">:</span> -webkit-sticky<span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>firstThatWorks</code> 函数来实现相同的目的</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">position</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">firstThatWorks</span><span class="token punctuation">(</span><span class="token string">'sticky'</span><span class="token punctuation">,</span> <span class="token string">'-webkit-sticky'</span><span class="token punctuation">,</span> <span class="token string">'fixed'</span><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><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="关键帧动画"><a aria-hidden="true" tabindex="-1" href="#关键帧动画"><span class="icon icon-link"></span></a>关键帧动画</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> fadeIn <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">keyframes</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">from</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">opacity</span><span class="token operator">:</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 literal-property property">to</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">opacity</span><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 class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">animationName</span><span class="token operator">:</span> fadeIn<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">animationDuration</span><span class="token operator">:</span> <span class="token string">'1s'</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"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>使用 <code>stylex.keyframes()</code> 函数来定义关键帧动画</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 style="background:#d7a100;" 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&style=background:#d7a100;-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</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"> <span class="token comment">// -- 不允许解构或默认值</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">bar</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">height</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"> height<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// 函数体必须是对象字面量</span>
|
||
</span><span class="code-line"> <span class="token comment">// -- 不允许使用 { return {} }</span>
|
||
</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 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 keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyComponent</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 comment">// `height` 的值在编译时不能确定。</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>height<span class="token punctuation">,</span> setHeight<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">10</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 operator"><</span>div <span class="token punctuation">{</span><span class="token spread operator">...</span>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>styles<span class="token punctuation">.</span><span class="token method function property-access">bar</span><span class="token punctuation">(</span>height<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>注意：动态样式是一项高级功能，应谨慎使用。对于大多数用例，条件样式应该足够了。</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="使用样式-1"><a aria-hidden="true" tabindex="-1" href="#使用样式-1"><span class="icon icon-link"></span></a>使用样式</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="合并样式"><a aria-hidden="true" tabindex="-1" href="#合并样式"><span class="icon icon-link"></span></a>合并样式</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">1.5</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'grey'</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"> <span class="token literal-property property">highlighted</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rebeccapurple'</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"><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 tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> styles<span class="token punctuation">.</span><span class="token property-access">base</span><span class="token punctuation">,</span> styles<span class="token punctuation">.</span><span class="token property-access">highlighted</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> <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 punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>如果样式的顺序颠倒，文本将为灰色</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>div</span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> styles<span class="token punctuation">.</span><span class="token property-access">highlighted</span><span class="token punctuation">,</span> styles<span class="token punctuation">.</span><span class="token property-access">base</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> <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></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="条件样式"><a aria-hidden="true" tabindex="-1" href="#条件样式"><span class="icon icon-link"></span></a>条件样式</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> styles<span class="token punctuation">.</span><span class="token property-access">base</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> props<span class="token punctuation">.</span><span class="token property-access">isHighlighted</span> <span class="token operator">&&</span> styles<span class="token punctuation">.</span><span class="token property-access">highlighted</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> isActive <span class="token operator">?</span> styles<span class="token punctuation">.</span><span class="token property-access">active</span> <span class="token operator">:</span> styles<span class="token punctuation">.</span><span class="token property-access">inactive</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token spread"> <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></code></pre>
|
||
<p>通过使用常见的 JavaScript 模式（例如三元表达式和 <code>&&</code> 运算符），可以在运行时有条件地应用样式。 <code>stylex.props</code> 忽略虚假值，例如 <code>null</code>、<code>undefined</code> 或 <code>false</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="样式变体"><a aria-hidden="true" tabindex="-1" href="#样式变体"><span class="icon icon-link"></span></a>样式变体</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">violet</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'blueviolet'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">':hover'</span><span class="token operator">:</span> <span class="token string">'darkviolet'</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"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'white'</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"> <span class="token literal-property property">gray</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'gainsboro'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token string-property property">':hover'</span><span class="token operator">:</span> <span class="token string">'lightgray'</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"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token comment">// ... more variants here ...</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>然后，通过使用 <code>variant</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">Button</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>variant<span class="token punctuation">,</span> <span class="token spread operator">...</span>props<span class="token punctuation">}</span></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>button</span> <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 spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>styles<span class="token punctuation">[</span>variant<span class="token punctuation">]</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><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 h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="样式作为道具"><a aria-hidden="true" tabindex="-1" href="#样式作为道具"><span class="icon icon-link"></span></a>样式作为道具</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CustomComponent</span></span> <span class="token attr-name">style</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">base</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p><code>stylex.props</code> 函数返回具有 <code>className</code> 和 <code>style</code> 的对象。当样式要合并到组件内时不要使用它：</p>
|
||
<pre class="language-jsx" style="background: #ff00002b;"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// ❌ 不要这样使用! ⚠️</span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CustomComponent</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>styles<span class="token punctuation">.</span><span class="token property-access">base</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></code></pre>
|
||
<!--rehype:style=background: #ff00002b;-->
|
||
<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">CustomComponent</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</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></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> styles<span class="token punctuation">.</span><span class="token property-access">base</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> isHighlighted <span class="token operator">&&</span> styles<span class="token punctuation">.</span><span class="token property-access">highlighted</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></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="接受组件中的样式"><a aria-hidden="true" tabindex="-1" href="#接受组件中的样式"><span class="icon icon-link"></span></a>接受组件中的样式</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// Local Styles</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">base</span><span class="token operator">:</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 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><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">CustomComponent</span></span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>style<span class="token punctuation">}</span></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"><span class="token tag"> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>styles<span class="token punctuation">.</span><span class="token property-access">base</span><span class="token punctuation">,</span> style<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></code></pre>
|
||
<p>将其与 <code>stylex.props</code> 函数一起应用</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="取消设置样式"><a aria-hidden="true" tabindex="-1" href="#取消设置样式"><span class="icon icon-link"></span></a>“取消设置”样式</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token keyword null nil">null</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"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>将样式属性设置为 <code>null</code> 会删除 StyleX 之前为其应用的任何样式。</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="主题"><a aria-hidden="true" tabindex="-1" href="#主题"><span class="icon icon-link"></span></a>主题</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="使用媒体查询"><a aria-hidden="true" tabindex="-1" href="#使用媒体查询"><span class="icon icon-link"></span></a>使用媒体查询</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</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 constant">DARK</span> <span class="token operator">=</span> <span class="token string">'@media (prefers-color-scheme: dark)'</span><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">const</span> colors <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">primaryText</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">secondaryText</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">accent</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'lightblue'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">lineColor</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'gray'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'lightgray'</span><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></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="定义变量"><a aria-hidden="true" tabindex="-1" href="#定义变量"><span class="icon icon-link"></span></a>定义变量</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><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">const</span> tokens <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">primaryText</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">secondaryText</span><span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token string">'4px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontFamily</span><span class="token operator">:</span> <span class="token string">'system-ui, sans-serif'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'16px'</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></code></pre>
|
||
<p>这定义了 HTML 文档的 <code>:root</code> 处的变量。它们可以作为常量导入并在 <code>stylex.create</code> 调用中使用。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="使用变量"><a aria-hidden="true" tabindex="-1" href="#使用变量"><span class="icon icon-link"></span></a>使用变量</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</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 constant">DARK</span> <span class="token operator">=</span> <span class="token string">'@media (prefers-color-scheme: dark)'</span><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">const</span> colors <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">primaryText</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">secondaryText</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">accent</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'lightblue'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">lineColor</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'gray'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'lightgray'</span><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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> spacing <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">none</span><span class="token operator">:</span> <span class="token string">'0px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">xsmall</span><span class="token operator">:</span> <span class="token string">'4px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">small</span><span class="token operator">:</span> <span class="token string">'8px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">medium</span><span class="token operator">:</span> <span class="token string">'12px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">large</span><span class="token operator">:</span> <span class="token string">'20px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">xlarge</span><span class="token operator">:</span> <span class="token string">'32px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">xxlarge</span><span class="token operator">:</span> <span class="token string">'48px'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">xxxlarge</span><span class="token operator">:</span> <span class="token string">'96px'</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></code></pre>
|
||
<p>然后就可以像这样导入和使用这些样式：</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>colors<span class="token punctuation">,</span> spacing<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'../tokens.stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">primaryText</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> colors<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">padding</span><span class="token operator">:</span> spacing<span class="token punctuation">.</span><span class="token property-access">medium</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"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="定义变量时的规则"><a aria-hidden="true" tabindex="-1" href="#定义变量时的规则"><span class="icon icon-link"></span></a>定义变量时的规则</h3><div class="wrap-body">
|
||
<p>变量必须定义在 <code>.stylex.js</code> 文件中，变量必须位于具有以下扩展名之一的文件中：</p>
|
||
<ul>
|
||
<li>.stylex.js</li>
|
||
<li>.stylex.mjs</li>
|
||
<li>.stylex.cjs</li>
|
||
<li>.stylex.ts</li>
|
||
<li>.stylex.tsx</li>
|
||
<li>.stylex.jsx</li>
|
||
</ul>
|
||
<p>变量必须命名为 <code>exports</code></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// ✅ - 命名导出</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> colors <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</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"><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 keyword">const</span> sizeVars <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token spread 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"><span class="token keyword module">export</span> <span class="token keyword">const</span> sizes <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</span><span class="token punctuation">(</span>sizeVars<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>不允许：</p>
|
||
<pre class="language-js" style="background: #ff00001a;"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// ❌ - 只允许命名导出</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</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"><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 comment">// ❌ - 变量必须直接导出</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> x <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</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"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> colors <span class="token operator">=</span> x<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 module">export</span> <span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">foregrounds</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</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"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgrounds</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</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"> <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 class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:style=background: #ff00001a;-->
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 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=col-span-2 row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>colors<span class="token punctuation">,</span> spacing<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./tokens.stylex'</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 constant">DARK</span> <span class="token operator">=</span> <span class="token string">'@media (prefers-color-scheme: dark)'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// Dracula 主题</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> dracula <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">createTheme</span><span class="token punctuation">(</span>colors<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">primaryText</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'purple'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'lightpurple'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">secondaryText</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'pink'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'hotpink'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">accent</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'#555'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">lineColor</span><span class="token operator">:</span> <span class="token string">'red'</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></code></pre>
|
||
<p>应用主题，主题对象类似于使用 <code>stylex.create()</code> 创建的样式对象。使用 <code>stylex.props()</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>div</span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>stylex<span class="token punctuation">.</span><span class="token method function property-access">props</span><span class="token punctuation">(</span>dracula<span class="token punctuation">,</span> styles<span class="token punctuation">.</span><span class="token property-access">container</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 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>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<ul>
|
||
<li>创建主题时必须覆盖变量组中的所有变量。这一选择是为了帮助发现意外遗漏</li>
|
||
<li>主题可以在代码库中的任何位置使用 <code>stylex.createTheme()</code> 创建，并在文件或组件之间传递</li>
|
||
<li>如果同一变量组的多个主题应用于同一 HTML 元素，则最后应用的主题获胜</li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="变量类型"><a aria-hidden="true" tabindex="-1" href="#变量类型"><span class="icon icon-link"></span></a>变量类型</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><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">const</span> tokens <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">primaryTxt</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">color</span><span class="token punctuation">(</span><span class="token string">'black'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">secondaryTxt</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">color</span><span class="token punctuation">(</span><span class="token string">'#333'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">length</span><span class="token punctuation">(</span><span class="token string">'4px'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">angle</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">angle</span><span class="token punctuation">(</span><span class="token string">'0deg'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">int</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">integer</span><span class="token punctuation">(</span><span class="token number">2</span><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></code></pre>
|
||
<p>所有值都可以是任意字符串。要将类型分配给变量，可以使用适当的类型函数包装它们</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="变量类型--条件值"><a aria-hidden="true" tabindex="-1" href="#变量类型--条件值"><span class="icon icon-link"></span></a>变量类型 & 条件值</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">/// tokens.stylex.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><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">const</span> colors <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">primaryText</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">color</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">default</span><span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token constant">DARK</span><span class="token punctuation">]</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 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></code></pre>
|
||
<p>用法保持不变，以上内容完全有效</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="源代码中的类型安全"><a aria-hidden="true" tabindex="-1" href="#源代码中的类型安全"><span class="icon icon-link"></span></a>源代码中的类型安全</h3><div class="wrap-body">
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// tokens.stylex.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>tokens<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./tokens.stylex.js'</span><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">const</span> high <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">defineVars</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">primaryTxt</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">color</span><span class="token punctuation">(</span><span class="token string">'black'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">secondaryTxt</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">color</span><span class="token punctuation">(</span><span class="token string">'#222'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">length</span><span class="token punctuation">(</span><span class="token string">'8px'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">angle</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">angle</span><span class="token punctuation">(</span><span class="token string">'0deg'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">int</span><span class="token operator">:</span> stylex<span class="token punctuation">.</span><span class="token property-access">types</span><span class="token punctuation">.</span><span class="token method function property-access">integer</span><span class="token punctuation">(</span><span class="token number">4</span><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></code></pre>
|
||
<p>当在 <code>stylex.defineVars</code> 中使用特定类型声明变量时，静态类型将强制在 <code>stylex.createTheme</code> 调用中为该变量设置主题时使用相同类型的函数</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 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=col-span-2 row-span-2-->
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module">as</span> stylex</span> <span class="token keyword module">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>tokens<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./tokens.stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> rotate <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">keyframes</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword module">from</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>tokens<span class="token punctuation">.</span><span class="token property-access">angle</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'0deg'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">to</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>tokens<span class="token punctuation">.</span><span class="token property-access">angle</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token string">'360deg'</span> <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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">gradient</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundImage</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">conic-gradient(from </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>tokens<span class="token punctuation">.</span><span class="token property-access">angle</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, ...colors)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">animationName</span><span class="token operator">:</span> rotate<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">animationDuration</span><span class="token operator">:</span> <span class="token string">'10s'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">animationTimingFunction</span><span class="token operator">:</span> <span class="token string">'linear'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">animationIterationCount</span><span class="token operator">:</span> <span class="token string">'infinite'</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"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<p>可以通过对其中使用的角度进行动画处理来对渐变进行动画处理</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="模拟-round"><a aria-hidden="true" tabindex="-1" href="#模拟-round"><span class="icon icon-link"></span></a>模拟 round()</h3><div class="wrap-body">
|
||
<p>现代浏览器开始支持 CSS 中的 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/round">round()</a> 函数。</p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">gradient</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// Math.floor</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>tokens<span class="token punctuation">.</span><span class="token property-access">int</span><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">calc(16 / 9)</span><span class="token template-punctuation string">`</span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token comment">// Math.round</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>tokens<span class="token punctuation">.</span><span class="token property-access">int</span><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">calc((16 / 9) + 0.5)</span><span class="token template-punctuation string">`</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>该功能通过一个整数类型的变量来模拟</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="typescript-类型"><a aria-hidden="true" tabindex="-1" href="#typescript-类型"><span class="icon icon-link"></span></a>TypeScript 类型</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="stylexstyles-样式-props-类型"><a aria-hidden="true" tabindex="-1" href="#stylexstyles-样式-props-类型"><span class="icon icon-link"></span></a>StyleXStyles 样式 props 类型</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span>StyleXStyles<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> stylex <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token operator">...</span>
|
||
</span><span class="code-line"> style<span class="token operator">?</span><span class="token operator">:</span> StyleXStyles<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">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> style<span class="token punctuation">,</span> <span class="token operator">...</span>otherProps <span class="token punctuation">}</span><span class="token operator">:</span> Props
|
||
</span><span class="code-line"><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token operator"><</span>div
|
||
</span><span class="code-line"> <span class="token punctuation">{</span><span class="token operator">...</span>stylex<span class="token punctuation">.</span><span class="token function">props</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> localStyles<span class="token punctuation">.</span>foo<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> localStyles<span class="token punctuation">.</span>bar<span class="token punctuation">,</span> style
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token operator">></span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-3"><div class="wrap-header h3wrap"><h3 id="stylexstyleswithout-禁止属性"><a aria-hidden="true" tabindex="-1" href="#stylexstyleswithout-禁止属性"><span class="icon icon-link"></span></a>StyleXStylesWithout 禁止属性</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-3-->
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span>StyleXStylesWithout<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> stylex <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">NoLayout</span> <span class="token operator">=</span> StyleXStylesWithout<span class="token operator"><</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> position<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> display<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> top<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> start<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> end<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> bottom<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> border<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> borderWidth<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> borderBottomWidth<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> borderEndWidth<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> borderStartWidth<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> borderTopWidth<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> margin<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> marginBottom<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> marginEnd<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> marginStart<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> marginTop<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> padding<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> paddingBottom<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> paddingEnd<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> paddingStart<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> paddingTop<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> width<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> height<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> flexBasis<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> overflow<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> overflowX<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> overflowY<span class="token operator">:</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> style<span class="token operator">?</span><span class="token operator">:</span> NoLayout<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">
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>style<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token operator">:</span> Props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token operator"><</span>div
|
||
</span><span class="code-line"> <span class="token punctuation">{</span><span class="token operator">...</span>stylex<span class="token punctuation">.</span><span class="token function">props</span><span class="token punctuation">(</span>localStyles<span class="token punctuation">.</span>foo<span class="token punctuation">,</span> localStyles<span class="token punctuation">.</span>bar<span class="token punctuation">,</span> style<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token operator">></span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></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>此处对象类型中列出的属性将被禁止，但所有其他样式仍将被接受。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="从一组样式属性中接受"><a aria-hidden="true" tabindex="-1" href="#从一组样式属性中接受"><span class="icon icon-link"></span></a>从一组样式属性中接受</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span>StyleXStyles<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> style<span class="token operator">?</span><span class="token operator">:</span> StyleXStyles<span class="token operator"><</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> color<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"> backgroundColor<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"> borderColor<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"> borderTopColor<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"> borderEndColor<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"> borderBottomColor<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"> borderStartColor<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 operator">></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="限制样式的可能值"><a aria-hidden="true" tabindex="-1" href="#限制样式的可能值"><span class="icon icon-link"></span></a>限制样式的可能值</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span>StyleXStyles<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token operator">...</span>
|
||
</span><span class="code-line"> <span class="token comment">// 只接受 marginTop 的样式，其他不接受。</span>
|
||
</span><span class="code-line"> <span class="token comment">// marginTop 的值只能是 0、4、8 或 16。</span>
|
||
</span><span class="code-line"> style<span class="token operator">?</span><span class="token operator">:</span> StyleXStyles<span class="token operator"><</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> marginTop<span class="token operator">:</span> <span class="token number">0</span> <span class="token operator">|</span> <span class="token number">4</span> <span class="token operator">|</span> <span class="token number">8</span> <span class="token operator">|</span> <span class="token number">16</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="vargroup"><a aria-hidden="true" tabindex="-1" href="#vargroup"><span class="icon icon-link"></span></a>VarGroup</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> stylex <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> vars <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token function">defineVars</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> backgroundColor<span class="token operator">:</span> <span class="token string">'blue'</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><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">type</span> <span class="token class-name">Vars</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> vars<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">/*
|
||
</span></span><span class="code-line"><span class="token comment"> Vars = VarGroup<{
|
||
</span></span><span class="code-line"><span class="token comment"> color: string,
|
||
</span></span><span class="code-line"><span class="token comment"> backgroundColor: string,
|
||
</span></span><span class="code-line"><span class="token comment"> }>
|
||
</span></span><span class="code-line"><span class="token comment">*/</span>
|
||
</span></code></pre>
|
||
<p>VarGroup 是调用 <code>stylex.defineVars</code> 生成的对象的类型。它将键映射到 CSS 自定义属性的引用</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="staticstyles"><a aria-hidden="true" tabindex="-1" href="#staticstyles"><span class="icon icon-link"></span></a>StaticStyles</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span>StaticStyles<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> style<span class="token operator">?</span><span class="token operator">:</span> StaticStyles<span class="token operator"><</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> color<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token operator">|</span> <span class="token string">'blue'</span> <span class="token operator">|</span> <span class="token string">'green'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> padding<span class="token operator">?</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token operator">|</span> <span class="token number">4</span> <span class="token operator">|</span> <span class="token number">8</span> <span class="token operator">|</span> <span class="token number">16</span> <span class="token operator">|</span> <span class="token number">32</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> backgroundColor<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"> borderColor<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"> borderTopColor<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"> borderEndColor<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"> borderBottomColor<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"> borderStartColor<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 operator">></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>不允许使用函数定义的动态样式</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="theme"><a aria-hidden="true" tabindex="-1" href="#theme"><span class="icon icon-link"></span></a>Theme</h3><div class="wrap-body">
|
||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span>VarGroup<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> stylex <span class="token keyword">from</span> <span class="token string">'@stylexjs/stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token punctuation">{</span>vars<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./vars.stylex'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> theme<span class="token operator">:</span> Theme<span class="token operator"><</span><span class="token keyword">typeof</span> vars<span class="token operator">></span> <span class="token operator">=</span> stylex<span class="token punctuation">.</span><span class="token function">createTheme</span><span class="token punctuation">(</span>vars<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token comment">// OK</span>
|
||
</span><span class="code-line"> backgroundColor<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token comment">// OK</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|