组件化 Tailwind 传递 ClassName 参数最佳实践求解答

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 458 days ago, the information mentioned may be changed or developed.

如题，假设组件 A 内部有多个子元素，我希望将 A 组件化的同时能分别配置改子元素的 ClassName ，请问怎样设计组件 A 比较好？

6 replies • 2025-02-09 18:19:15 +08:00

XCFOX

Feb 9, 2025

可以参考 HeroUI ，给最外面层组件加一个 classNames 属性来传递子组件的 className

https://www.heroui.com/docs/components/card#slots

inewsk

Feb 9, 2025

props 传名为 classNames 的物件，键值是组件和子组件的样式属性

https://mantine.dev/styles/styles-api/

Leon6868

Feb 9, 2025

@inewsk #2 这个思路很好！但是不使用 className 的话，无法触发 tailwind css 的 intelliSence ，请问如果我想发布组件库的话，应该怎么处理呢？

leokun

Feb 9, 2025

lisongeee

Feb 9, 2025

tailwind css 的 intelliSence 是不是类似 unocss 的 strict 模式

unocss 默认是关闭 strict 模式的，普通的 js 代码 let v = 'flex-1' 也会有 unocss 代码提示

amlee

Feb 9, 2025 via Android

tailwind 的设计思路不是做这种事的吧？你这个场景不是应该传递 props 下去吗？