diff --git a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index 92e92e778e..c5c91355fd 100644
--- a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -406,24 +406,50 @@ exports[`renders components/checkbox/demo/debug-line.tsx extend context correctl
-
+ class="ant-checkbox"
+ >
+
+
+
+
+ Aligned
+
+
+
+
+
+
+
+
+
+
+
+ Aligned
+
+
+
+
`;
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
index a9f5caa101..db9fecff79 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
@@ -383,24 +383,50 @@ exports[`renders components/checkbox/demo/debug-line.tsx correctly 1`] = `
-
-
+
-
-
-
- Aligned
-
-
+ class="ant-checkbox"
+ >
+
+
+
+
+ Aligned
+
+
+
+
+
+
+
+
+
+
+
+ Aligned
+
+
+
+
`;
diff --git a/components/checkbox/demo/debug-line.tsx b/components/checkbox/demo/debug-line.tsx
index fbbb99ecb5..b78ee9a4fa 100644
--- a/components/checkbox/demo/debug-line.tsx
+++ b/components/checkbox/demo/debug-line.tsx
@@ -44,15 +44,23 @@ const App: React.FC = () => (
Little
-
- Aligned
-
+
+
+ Aligned
+
+
+
+
+
+ Aligned
+
+
);
diff --git a/components/checkbox/style/index.ts b/components/checkbox/style/index.ts
index 3be7b90947..5f949c574e 100644
--- a/components/checkbox/style/index.ts
+++ b/components/checkbox/style/index.ts
@@ -83,13 +83,9 @@ export const genCheckboxStyle: GenerateStyle = (token) => {
lineHeight: 1,
cursor: 'pointer',
- alignSelf: 'start',
- // https://github.com/ant-design/ant-design/issues/41564
- // Since `checkboxSize` is dynamic which should align with the text box,
- // We need do calculation here for offset.
- transform: `translate(0, ${
- (token.lineHeight * token.fontSize) / 2 - token.checkboxSize / 2
- }px)`,
+ // To make alignment right when `controlHeight` is changed
+ // Ref: https://github.com/ant-design/ant-design/issues/41564
+ alignSelf: 'center',
// Wrapper > Checkbox > input
[`${checkboxCls}-input`]: {
diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts
index f97bb3e350..b40addd202 100644
--- a/components/tree/style/index.ts
+++ b/components/tree/style/index.ts
@@ -1,10 +1,10 @@
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs';
-import { genCollapseMotion } from '../../style/motion';
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
+import { genFocusOutline, resetComponent } from '../../style';
+import { genCollapseMotion } from '../../style/motion';
import type { DerivativeToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { genFocusOutline, resetComponent } from '../../style';
// ============================ Keyframes =============================
const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
@@ -63,16 +63,7 @@ type TreeToken = DerivativeToken & {
};
export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => {
- const {
- treeCls,
- treeNodeCls,
- controlInteractiveSize: checkboxSize,
- treeNodePadding,
- treeTitleHeight,
- } = token;
- // Ref: https://github.com/ant-design/ant-design/issues/41564
- const checkBoxOffset = (token.lineHeight * token.fontSize) / 2 - checkboxSize / 2;
- const treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2 - checkBoxOffset;
+ const { treeCls, treeNodeCls, treeNodePadding, treeTitleHeight } = token;
const treeCheckBoxMarginHorizontal = token.paddingXS;
return {
@@ -269,7 +260,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
[`${treeCls}-checkbox`]: {
top: 'initial',
marginInlineEnd: treeCheckBoxMarginHorizontal,
- marginBlockStart: treeCheckBoxMarginVertical,
},
// >>> Title