diff --git a/src/components/internal/Collapse/Collapse.css.ts b/src/components/internal/Collapse/Collapse.css.ts
index aa8b405..068a5a7 100644
--- a/src/components/internal/Collapse/Collapse.css.ts
+++ b/src/components/internal/Collapse/Collapse.css.ts
@@ -13,9 +13,6 @@ export const wrapper = style({
height: 0,
transitionDuration: 'var(--collapse-duration-enter)',
},
- '&.collapse-enter-active': {
- transitionDuration: 'var(--collapse-duration-enter)',
- },
'&.collapse-exit': {
overflow: 'auto',
height: 'auto',
diff --git a/src/components/internal/Collapse/Collapse.tsx b/src/components/internal/Collapse/Collapse.tsx
index 89097fa..26ed831 100644
--- a/src/components/internal/Collapse/Collapse.tsx
+++ b/src/components/internal/Collapse/Collapse.tsx
@@ -1,5 +1,5 @@
import React, { useCallback, useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
import * as styles from './Collapse.css';
export type Props = Omit<
@@ -17,12 +17,10 @@ export const Collapse = ({ open, duration, children, ...rest }: Props) => {
const { current: body } = bodyRef;
node.style.height = `${body != null ? body.clientHeight : 0}px`;
- node.style.overflow = 'hidden';
}, []);
const clearInlineStyles = useCallback((node: HTMLElement) => {
node.style.height = '';
- node.style.overflow = '';
}, []);
const handleEnter = useCallback(
@@ -54,30 +52,34 @@ export const Collapse = ({ open, duration, children, ...rest }: Props) => {
);
return (
-
-
-
+
+ {open && (
+
+
+
+ )}
+
);
};