Allow changes to the className prop when the <Transition /> compo…

…nent is currently not transitioning (#2722)

* allow changes to the `className` when we are _not_ transitioning

* update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure hidden `Tab.Panel` components are hidden from the accessibility tree ([#2708](https://github.com/tailwindlabs/headlessui/pull/2708))
 - Add support for `role="alertdialog"` to `<Dialog>` component ([#2709](https://github.com/tailwindlabs/headlessui/pull/2709))
 - Ensure blurring the `Combobox.Input` component closes the `Combobox` ([#2712](https://github.com/tailwindlabs/headlessui/pull/2712))
+- Allow changes to the `className` prop when the `<Transition />` component is currently not transitioning ([#2722](https://github.com/tailwindlabs/headlessui/pull/2722))
 
 ### Added
 

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -403,15 +403,18 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
     unregister(container)
   }, parentNesting)
 
+  let isTransitioning = useRef(false)
   useTransition({
     immediate,
     container,
     classes,
     direction: transitionDirection,
     onStart: useLatestValue((direction) => {
+      isTransitioning.current = true
       nesting.onStart(container, direction, beforeEvent)
     }),
     onStop: useLatestValue((direction) => {
+      isTransitioning.current = false
       nesting.onStop(container, direction, afterEvent)
 
       if (direction === 'leave' && !hasChildren(nesting)) {
@@ -432,7 +435,11 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
       // Already apply the `enter` and `enterFrom` on the server if required
       className: classNames(rest.className, ...classes.current.enter, ...classes.current.enterFrom),
     }
-  } else {
+  }
+
+  // If we are re-rendering while we are transitioning, then we should ensure that the classes are
+  // not mutated by React itself because we are handling the transition ourself.
+  else if (isTransitioning.current) {
     // When we re-render while we are in the middle of the transition, then we should take the
     // incoming className and the current classes that are applied.
     //