[BUG] Styles set using CSS rules are overridden by inline styles when used in a Reorder.Group

[iKettles]

1. Read the FAQs 👇

2. Describe the bug

When using the Reorder component, styles using the :first-child selector (and perhaps also other selectors) are copied to an inline style and then not cleaned up. This means when the first item is reordered further down in the group it retains its style from the :first-child style rule and subsequently the new first child does not get the correct style as its background color (as taken from an li selector) is also copied to an inline style.

Give a clear and concise description of what the bug is.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to the sandbox preview
2. Reorder tomato (the first item) to swap places with cucumber (the second item) in the group
3. Observe how tomato retains its first-child style despite no longer being the first child
4. Observe how cucumber does not show the first-child style

5. Expected behavior

Styles set using regular CSS selectors should not be overridden by the inline style on the element when reordering in a group

6. Video or screenshots

7. Environment details

Chrome Version 103.0.5060.134 (Official Build) (arm64)

FAQs

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>

[mattgperry]

Dupe #1666