【免费下载链接】lytenyteLyteNyte Grid monorepo: Build powerful data tables with a lightning-fast, zero-dependency React data grid (~40 KB). Headless or pre-styled. Declarative API. 150 enterprise-grade features. Supported by 1771 Technologies.项目地址https://gitcode.com/gh_mirrors/ly/lytenyte点击查看免费下载LyteNyte Grid 是一款零依赖的 React 数据表格data grid它以 Headless无样式为核心设计同时内置了多套开箱即用的主题。本文带你用 4 种方案完成 React 数据表格的主题定制预置主题、Headless 纯 CSS、Tailwind 原子类、shadcn/ui 一键接入帮你快速找到最适合自己的那条路。 30 秒速览该选哪种定制方案不确定怎么选先看这张对比表方案上手速度可控程度适合场景⚡ 预置主题2 行代码中改 Design Token想快速得到好看的表格 Headless data 属性中等高原生 CSS有自有设计系统️ Tailwind中等高原子类 CVATailwind 技术栈项目 shadcn/ui一条命令高Token 自动同步shadcn/ui 项目四种方案不互斥——官方演示站本身就用「预置主题 Tailwind」组合构建的你可以混搭使用。 方案一Headless 纯 CSS —— 用 data 属性精准定位LyteNyte Grid 的每个 DOM 节点都带有data-ln-*前缀的自定义属性这是官方推荐的精准定位方式。例如表头单元格data-ln-header-celltrue数据单元格data-ln-celltrue行元素data-ln-row数值列data-ln-typenumber可用于右对齐数字隔行变色data-ln-alternatetrue一段典型的样式如下[data-ln-celltrue] { display: flex; align-items: center; padding-inline: 8px; background-color: light-dark(white, hsla(190, 32%, 6%, 1)); border-bottom: 1px solid light-dark(hsla(175, 20%, 95%, 1), hsla(177, 19%, 17%, 1)); } [data-ln-header-celltrue] { text-transform: capitalize; font-weight: 600; }配合 CSS 的light-dark()函数一份样式就能同时适配浅色与深色模式。完整的数据属性清单可在浏览器开发者工具中直接查看官方指南中也整理了常用列表。进阶技巧行详情容器data-ln-row-detail、单元格选择框data-ln-cell-selection-rect等内部元素不经过 React 组件暴露只能通过 CSS 选择器定位——这正是 data 属性方案最不可替代的地方。⚠️布局红线LyteNyte Grid 会为虚拟滚动和列宽计算写入width、height、transform等功能性内联样式请勿覆盖这些属性否则表格布局会错乱。 详细文档grid-theming.mdx/grid-theming.mdx?utm_sourcegitcode_repo_files)、grid-headless-parts.mdx/grid-headless-parts.mdx?utm_sourcegitcode_repo_files)⚡ 方案二预置主题 —— 两行代码得到精致表格最快的出效果方式导入 CSS 挂两个 class。import 1771technologies/lytenyte-core/grid-full.css;div classNameln-grid ln-dark Grid {...props} / /div内置主题一览主题 class风格ln-light标准浅色ln-dark标准深色ln-teal青色点缀官方演示常用ln-term终端风ln-shadcn基于 shadcn 色彩 Token支持深浅双模式ln-cotton-candy糖果色俏皮风格按需导入控制 CSS 体积为了压缩最终打包体积每个主题都有独立 CSS 文件如 teal.css、dark.css按需引入即可import 1771technologies/lytenyte-core/design.css; /* 间距/字体/阴影 Token */ import 1771technologies/lytenyte-core/grid.css; /* 基础网格样式 */ import 1771technologies/lytenyte-core/teal.css; /* 只引入需要的主题色 */文件作用design.css非颜色 Design Token间距、圆角、阴影、字体grid.css基于 Token 的基础网格样式all-colors.css一次性引入全部主题色light-dark.css浅色挂:root、深色挂.dark适合传统深浅切换grid-full.css以上全部一步到位用 Design Token 微调预置主题所有主题共用同一套 CSS 变量定义见 design.css覆盖变量即可微调.ln-grid.ln-teal { --ln-radius: 10px; --ln-font-md: 13px; --ln-primary-50: #00b894; /* 换成你的品牌色 */ }️ 方案三Tailwind —— 原子类 CVA 的组合拳所有 Headless 组件都接受标准className所以 Tailwind 直接可用零额外配置Grid.Cell key{c.id} cell{c} classNameflex items-center bg-gray-50 px-2 text-sm text-gray-800 /用 CVA 管理条件样式条件分支多了之后官方推荐clsxtailwind-mergeclass-variance-authorityCVA三件套把「数字列右对齐、隔行变色、表头加粗」等变体集中定义const cellStyles cva(flex items-center px-2, { variants: { number: { true: justify-end tabular-nums }, header: { true: bg-neutral-200 capitalize }, }, }); Grid.Cell cell{cell} className{tw(cellStyles({ number: cell.type number }))} /两个实用细节官方 Tailwind 变体包内导出 tw.css引入后可以直接写ln-cell:bg-ln-bg这类语义化变体import tailwindcss; import 1771technologies/lytenyte-core/tw.css;与预置主题混用时的层序坑预置主题样式位于ln-gridCSS layer 中可能被 Tailwind 意外覆盖请在入口 CSS 中声明layer base, ln-grid, components, utilities; 详细文档grid-theming-tailwind.mdx/grid-theming-tailwind.mdx?utm_sourcegitcode_repo_files) 方案四shadcn/ui —— 一条命令主题 Token 自动同步如果你的项目已经是 shadcn/ui 技术栈这是体验最顺滑的方案。1771 Technologies 在 shadcn 公共注册表维护了lytenyte命名空间运行npx shadcnlatest add lytenyte/lytenyte-core命令会自动写入预配置好的lytenyte-core.tsx组件与对应的 hook 文件直接导入即可import { Grid } from /components/lytenyte-core;其原理是内部套了一层ln-grid ln-shadcn容器并导入 shadcn 主题 CSSimport 1771technologies/lytenyte-core/design.css; import 1771technologies/lytenyte-core/shadcn.css; import 1771technologies/lytenyte-core/grid.css;ln-shadcn主题的精髓在于 ln-shadcn.css它把网格内部变量全部映射到 shadcn 的--background、--primary、--border等 Token 上并用color-mix()自动派生整套灰阶。这意味着——你改了 shadcn 的主题 Token表格颜色自动跟着变无需维护第二套颜色体系。 详细文档intro-installation-shadcn.mdx/intro-installation-shadcn.mdx?utm_sourcegitcode_repo_files)✅ 最佳实践清单定位元素优先用data-ln-*属性选择器比层层嵌套更稳定CSS 体积只导入用到的主题 CSS别无脑上grid-full.css️微调主题覆盖--ln-*Design Token而不是重写整块样式⚠️内联样式动态值才用style属性普通样式请用 CSS 类可维护性更好别碰布局width / height / top / left / transform等功能性内联样式不要覆盖混用无妨预置主题打底 Tailwind 局部覆盖是官方站点的做法 延伸阅读主题定制总览grid-theming.mdx/grid-theming.mdx?utm_sourcegitcode_repo_files)Tailwind 方案grid-theming-tailwind.mdx/grid-theming-tailwind.mdx?utm_sourcegitcode_repo_files)CSS Modules 方案grid-theming-css-modules.mdx/grid-theming-css-modules.mdx?utm_sourcegitcode_repo_files)Emotion / CSS-in-JS 方案grid-theming-emotion.mdx/grid-theming-emotion.mdx?utm_sourcegitcode_repo_files)Headless 组件结构grid-headless-parts.mdx/grid-headless-parts.mdx?utm_sourcegitcode_repo_files)主题源码packages/lytenyte-design/src/themes/赞分享【免费下载链接】lytenyteLyteNyte Grid monorepo: Build powerful data tables with a lightning-fast, zero-dependency React data grid (~40 KB). Headless or pre-styled. Declarative API. 150 enterprise-grade features. Supported by 1771 Technologies.项目地址https://gitcode.com/gh_mirrors/ly/lytenyte点击查看免费下载相关推荐shadcn-vue 主题定制完全指南CSS 变量与 Tailwind 工具类两种方案深度解析shadcn vue 主题定制完全指南CSS 变量与 Tailwind 工具类两种方案深度解析 主题定制是 shadcn vue 组件库落地到真实项目时的第一前端UI组件next-shadcn-dashboard-starter 主题定制完全指南CSS 变量、OKLCH 与 shadcn CLI 预设实战next shadcn dashboard starter 主题定制完全指南CSS 变量、OKLCH 与 shadcn CLI 预设实战 本文以 shadcn前端后端企业应用IOPaint 完整指南AI 图像修复去水印、换物体三条命令本地跑起来IOPaint 完整指南AI 图像修复去水印、换物体三条命令本地跑起来 IOPaint 是一款免费开源的 AI 图像修复工具擦掉图片里的水印、物体和路人人工智能AI 应用计算机视觉图像处理媒体生成后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考