Skip to content

fix: panel styles and classNames not working #409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 5 commits into from
Jan 6, 2026
Merged

fix: panel styles and classNames not working #409

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9aba53
fix: panel styles and classNames not working
keiseiTi Nov 26, 2025
ecd38af
fix: adjust classNames and styles in the Panel
keiseiTi Nov 26, 2025
a5d71b7
fix: merge classNames and styles in the panel, and add test
keiseiTi Nov 26, 2025
d57c865
fix: adjust test and merged styles and classNames
keiseiTi Dec 22, 2025
8372d77
chore: simplify
zombieJ Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/hooks/useItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
openMotion,
expandIcon,
classNames: collapseClassNames,
styles,
styles: collapseStyles,
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Renaming styles to collapseStyles is a good step to avoid naming collisions. However, this fix for panel-specific styles and classNames appears to be incomplete because it only applies to panels defined via the items prop.

The getNewChild function (which handles Panel components passed as children, starting on line 88) has not been updated. It still passes the Collapse component's styles and classNames to each CollapsePanel, ignoring the props on the Panel itself.

To ensure consistent behavior, I recommend applying a similar fix to the getNewChild function. This would involve:

  1. Destructuring classNames and styles from child.props.
  2. Passing childClassNames || collapseClassNames and childStyles || collapseStyles to the cloned element.

This will make the fix comprehensive, even though getNewChild is deprecated.

} = props;

return items.map((item, index) => {
Expand All @@ -33,6 +33,8 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
collapsible: rawCollapsible,
onItemClick: rawOnItemClick,
destroyOnHidden: rawDestroyOnHidden,
classNames,
styles,
...restProps
} = item;

Expand Down Expand Up @@ -60,8 +62,8 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => {
return (
<CollapsePanel
{...restProps}
classNames={collapseClassNames}
styles={styles}
classNames={classNames || collapseClassNames}
Copy link
Copy Markdown
Member

@zombieJ zombieJ Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不应该是替代关系，而是合并关系

Copy link
Copy Markdown
Member

@zombieJ zombieJ Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

另外也需要 test case

Copy link
Copy Markdown
Contributor Author

@keiseiTi keiseiTi Nov 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好的，重新提交了，再看看

styles={styles || collapseStyles}
prefixCls={prefixCls}
key={key}
panelKey={key}
Expand Down