defineStyleX

稳定性: 实验性 ⚠️ 实验性功能，风险自负

在 <script setup> 定义与使用 StyleX 的 Atomic CSS-in-JS.

Features	Supported
Vue 3	✅
Nuxt 3	✅
TypeScript / Volar	✅
Vue 2	✅

配置

在使用这个宏之前，你需要先引入与配置 StyleX。步骤可能会有所变化，你可能需要查看 StyleX 官方文档以及 vite-plugin-stylex 的文档，以获取最新信息。

Vite

pnpm add @stylexjs/stylex vite-plugin-stylex

vite.config.ts

import Vue from '@vitejs/plugin-vue'
import VueMacros from 'unplugin-vue-macros/vite'
import { defineConfig } from 'vite'
import StyleX from 'vite-plugin-stylex'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
      },
    }),
    StyleX(), // 必须放在 Vue Macros 插件后
  ],
})

App.vue

vue

<style>
/* 引入 StyleX 样式表, 参考： https://github.com/HorusGoul/vite-plugin-stylex */
@stylex stylesheet;
</style>

基本用法

App.vue

vue

<script setup lang="ts">
const styles
 = defineStyleX
({
  red
: { color
: 'red' },
})

// ...
</script>

<template>
  <p
 v-style
x="styles
.red
">Red</p
>
</template>

编译结果（有所简化）

App.vue

vue

<script lang="ts">
const styles
 = _stylex_create
({
  red
: { color
: 'red' },
})
</script>

<script setup lang="ts">
import {
  attrs
 as _stylex_attrs
,
  create
 as _stylex_create
,
} from '@stylexjs/stylex'

// ...
</script>

<template>
  <p
 v-bind="_stylex_attrs
(styles
.red
)">Red</p
>
</template>

条件样式

你可以应用多个样式，也可以根据条件应用样式。

App.vue

vue

<script setup lang="ts">
defineProps
<{ bold
?: boolean }>()

const styles
 = defineStyleX
({
  red
: { color
: 'red' },
  bold
: { fontWeight
: 'bold' },
})
</script>

<template>
  <span
 v-style
x="(
styles
.
red
, 
bold
 && 
styles
.
bold
)
">Red</span
>
</template>

编译结果（有所简化）

App.vue

vue

<script lang="ts">
const styles
 = _stylex_create
({
  red
: { color
: 'red' },
  bold
: { fontWeight
: 'bold' },
})
</script>

<script setup lang="ts">
import {
  attrs
 as _stylex_attrs
,
  create
 as _stylex_create
,
} from '@stylexjs/stylex'

defineProps
<{ bold
?: boolean }>()
</script>

<template>
  <span
 v-bind="_stylex_attrs
(styles
.red
, bold
 && styles
.bold
)">Red</span
>
</template>