feat(Collapse): support classNames and styles for component and ConfigProvider#52258
feat(Collapse): support classNames and styles for component and ConfigProvider#52258thinkasany merged 11 commits intoant-design:nextfrom
classNames and styles for component and ConfigProvider#52258Conversation
|
|
👁 Visual Regression Report for PR #52258 Failed ❌
Important There are 1 diffs found in this PR: 🔄
|
|
|
WalkthroughThis pull request introduces a new feature to the Changes
|
| prefixCls={prefixCls} | ||
| className={collapseClassName} | ||
| style={{ ...collapse?.style, ...style }} | ||
| style={{ ...collapse?.styles?.root, ...collapse?.style, ...styles?.root, ...style }} |
There was a problem hiding this comment.
Ensure that the merging of styles does not unintentionally override important styles. Consider the order of merging to maintain intended styling priorities.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #52258 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 760 760
Lines 13681 13681
Branches 3576 3576
=========================================
Hits 13681 13681 ☔ View full report in Codecov by Sentry. |
More templates
commit: |
Bundle ReportChanges will increase total bundle size by 3.15kB (0.09%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
faa4de9 to
691f24e
Compare
691f24e to
af29d0d
Compare
|
这个样式从 padding 改成 margin 把~ 
|
components/collapse/Collapse.tsx
Outdated
| if (children) { | ||
| return toArray(children).map((child) => child); | ||
| return toArray(children).map((child) => | ||
| React.cloneElement(child as React.ReactElement<ItemType>, { |
There was a problem hiding this comment.
这里有问题，如果是通过 items 传递的是没有这些信息的。而且这么写感觉有点臃肿，可以考虑加个 context 来传递 classNames 和 styles
|
|
||
| return ( | ||
| <div style={{ position: 'absolute', inset: 0 }}> | ||
| <div style={{ position: 'absolute', inset: 0, margin: '42px 24px 50px' }}> |
There was a problem hiding this comment.
useToken 里取 token.marginXXL？这样如果是紧凑主题也会跟着变的。
There was a problem hiding this comment.
import { useToken } from '../../theme/internal';
const [, token] = useToken();
return (
<div style={{ position: 'absolute', inset: 0, margin: token.marginXL }}>classNames and stylesclassNames and styles for component and ConfigProvider
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
wait for react-component/collapse#358
📝 Change Log
classNamesandstyles.classNames和styles。