重复问题
- 我已搜索现有的问题
最新版本
- 我已测试了最新版本
重现步骤 🕹
链接到实时示例: https://codesandbox.io/p/sandbox/accordion-rounded-edges-issue-phdcxr?file=%2Fsrc%2FDemo.tsx%3A17%2C41
步骤:将一个 TextField
作为具有圆角边缘的 Accordion
的兄弟元素添加 - 注意圆角边缘不再存在。
当前行为 😯
当另一个组件(如 TextField
)作为 Accordion
的兄弟元素时,圆角边缘和其他来自 first/last-of-type 样式的样式不再出现:
或
预期行为 🤔
我希望这些样式即使周围有其他类似这样的兄弟元素(如
),也能应用于第一个和最后一个 accordion 。
上下文 🔦
解决方法是将 accordion 包裹在一个 div
中,以便它们拥有自己的父元素,这样就不是一个大问题了,但不确定在与其他组件渲染在一起时是否是预期的行为。
谢谢!
2条答案
按热度按时间olmpazwi1#
我相信它应该可以在不使用
div
的情况下正常工作。这个问题的原因是:first-of-type
和:last-of-type
伪类应用于同类型的兄弟元素。由于TextField
和Accordion
都被渲染为div
,它们属于同一类型,导致伪类样式问题。一个潜在的解决方案,我不确定它是否足够稳健,可以是使用 data-* 属性来标记第一个和最后一个 accordion 元素,类似于 Joy UI Accordion 所做的。@DiegoAndai@siriwatknp,你怎么看?令人惊讶的是,在 GitHub 上之前没有报告过类似的问题。
作为临时的 "解决方法",你可以将其用
div
包裹起来,直到找到更好的解决方案。gijlo24d2#
一个潜在的解决方案,我不确定它是否稳健,可以是使用data-*属性来标记第一个和最后一个 accordion 元素。这将需要引入
AccordionGroup
。我认为我们可以考虑在v7中采用这个好主意。而不是data-*属性,我会使用类似于#38520的类。