radix-ui/themes使用示例 

pnpm create vite@latest

index.html:

<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>项目标题</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>

src/main.tsx:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "@radix-ui/themes/styles.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
	<StrictMode>
		<App />
	</StrictMode>,
);

src/App.tsx:

import { Theme, ThemePanel } from "@radix-ui/themes";
import Index from "./Index.tsx";

export default function () {
	return (
		<Theme appearance="dark">
			<Index />
			<ThemePanel />
		</Theme>
	);
}
posted @   卓能文  阅读(211)  评论(0)  编辑  收藏  举报
相关博文：
·  v-md-editor示例
·  svelte marked shiki示例
·  vue+vite+ts 开发项目
·  vite创建一个vue3项目
·  项目初始化
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
点击右上角即可分享
微信分享提示
SQL AI 助手