重复问题
- 我已搜索现有的问题
最新版本
- 我已测试了最新版本
重现步骤 🕹
链接到实时示例： 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的类。