source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demo): improve dark demo (#55647)

Browse Source 
* chore(demo): improve dark demo

* Update components/transfer/demo/style-class.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 遇见同学 <1875694521@qq.com>

* Update components/transfer/demo/style-class.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: 遇见同学 <1875694521@qq.com>

* chore: update snap

---------

Signed-off-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
遇见同学
2025-11-08 14:23:01 +08:00
committed by GitHub
parent 4998944333
commit 6664c579c7
11 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -2728,7 +2728,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="rc-virtual-list"
style="background-color: rgb(249, 249, 249); position: relative;"
style="background-color: rgba(240, 240, 240, 0.85); position: relative;"
>
<div
class="rc-virtual-list-holder"
@@ -2741,6 +2741,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="Burnaby"
>
<div
@@ -2757,6 +2758,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="Seattle"
>
<div
@@ -2773,6 +2775,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="Los Angeles"
>
<div
@@ -2789,6 +2792,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="San Francisco"
>
<div
@@ -2805,6 +2809,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="Meet student"
>
<div
@@ -2873,7 +2878,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="rc-virtual-list"
style="background-color: rgb(240, 240, 240); position: relative;"
style="background-color: rgba(240, 240, 240, 0.85); position: relative;"
>
<div
class="rc-virtual-list-holder"
@@ -2886,6 +2891,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="Burnaby"
>
<div
@@ -2902,6 +2908,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="Seattle"
>
<div
@@ -2918,6 +2925,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="Los Angeles"
>
<div
@@ -2934,6 +2942,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="San Francisco"
>
<div
@@ -2950,6 +2959,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
</div>
<div
class="ant-select-item ant-select-item-option"
style="color: rgb(39, 39, 39);"
title="Meet student"
>
<div

6
components/auto-complete/demo/style-class.tsx
View File

@@ -12,7 +12,8 @@ const useStyle = createStyles(({ css }) => ({
const stylesObject: AutoCompleteProps['styles'] = {
popup: {
root: { borderWidth: 1, borderColor: '#1890ff' },
list: { backgroundColor: '#f9f9f9' },
list: { backgroundColor: 'rgba(240,240,240, 0.85)' },
listItem: { color: '#272727' },
},
};
@@ -21,7 +22,8 @@ const stylesFn: AutoCompleteProps['styles'] = ({ props }) => {
return {
popup: {
root: { borderWidth: 1, borderColor: '#ccc' },
list: { backgroundColor: '#f0f0f0' },
list: { backgroundColor: 'rgba(240,240,240, 0.85)' },
listItem: { color: '#272727' },
},
} satisfies AutoCompleteProps['styles'];
}

2
components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -4494,7 +4494,7 @@ exports[`renders components/input-number/demo/style-class.tsx extend context cor
</div>
<div
class="ant-input-number ant-input-number-lg ant-input-number-outlined ant-input-number-mode-input css-var-test-id ant-input-number-css-var acss-1tkizl6"
style="background-color: rgb(250, 250, 250); border-color: rgb(114, 46, 209);"
style="background-color: rgba(250, 250, 250, 0.5); border-color: rgb(114, 46, 209);"
>
<div
class="ant-input-number-handler-wrap"

2
components/input-number/__tests__/__snapshots__/demo.test.tsx.snap
View File

@@ -4201,7 +4201,7 @@ exports[`renders components/input-number/demo/style-class.tsx correctly 1`] = `
</div>
<div
class="ant-input-number ant-input-number-lg ant-input-number-outlined ant-input-number-mode-input css-var-test-id ant-input-number-css-var acss-1tkizl6"
style="background-color:#fafafa;border-color:#722ed1"
style="background-color:rgba(250,250,250, 0.5);border-color:#722ed1"
>
<div
class="ant-input-number-handler-wrap"

2
components/input-number/demo/style-class.tsx
View File

@@ -21,7 +21,7 @@ const stylesFn: InputNumberProps['styles'] = ({ props }) => {
if (props.size === 'large') {
return {
root: {
backgroundColor: '#fafafa',
backgroundColor: 'rgba(250,250,250, 0.5)',
borderColor: '#722ed1',
},
} satisfies InputNumberProps['styles'];

6
components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -1310,7 +1310,7 @@ exports[`renders components/splitter/demo/style-class.tsx extend context correct
>
<h5
class="ant-typography ant-typography-secondary css-var-test-id"
style="white-space: nowrap;"
style="color: rgb(0, 0, 0);"
>
First
</h5>
@@ -1338,7 +1338,7 @@ exports[`renders components/splitter/demo/style-class.tsx extend context correct
>
<h5
class="ant-typography ant-typography-secondary css-var-test-id"
style="white-space: nowrap;"
style="color: rgb(0, 0, 0);"
>
Second
</h5>
@@ -1359,7 +1359,6 @@ exports[`renders components/splitter/demo/style-class.tsx extend context correct
>
<h5
class="ant-typography ant-typography-secondary css-var-test-id"
style="white-space: nowrap;"
>
First
</h5>
@@ -1386,7 +1385,6 @@ exports[`renders components/splitter/demo/style-class.tsx extend context correct
>
<h5
class="ant-typography ant-typography-secondary css-var-test-id"
style="white-space: nowrap;"
>
Second
</h5>

6
components/splitter/__tests__/__snapshots__/demo.test.ts.snap
View File

@@ -1293,7 +1293,7 @@ exports[`renders components/splitter/demo/style-class.tsx correctly 1`] = `
>
<h5
class="ant-typography ant-typography-secondary css-var-test-id"
style="white-space:nowrap"
style="color:#000"
>
First
</h5>
@@ -1321,7 +1321,7 @@ exports[`renders components/splitter/demo/style-class.tsx correctly 1`] = `
>
<h5
class="ant-typography ant-typography-secondary css-var-test-id"
style="white-space:nowrap"
style="color:#000"
>
Second
</h5>
@@ -1342,7 +1342,6 @@ exports[`renders components/splitter/demo/style-class.tsx correctly 1`] = `
>
<h5
class="ant-typography ant-typography-secondary css-var-test-id"
style="white-space:nowrap"
>
First
</h5>
@@ -1369,7 +1368,6 @@ exports[`renders components/splitter/demo/style-class.tsx correctly 1`] = `
>
<h5
class="ant-typography ant-typography-secondary css-var-test-id"
style="white-space:nowrap"
>
Second
</h5>

10
components/splitter/demo/style-class.tsx
View File

@@ -3,10 +3,12 @@ import { Flex, Splitter, Typography } from 'antd';
import type { SplitterProps } from 'antd';
import { createStyles } from 'antd-style';
const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => {
const Desc: React.FC<Readonly<{ text?: string | number; style?: React.CSSProperties }>> = (
props,
) => {
return (
<Flex justify="center" align="center" style={{ height: '100%' }}>
<Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
<Typography.Title type="secondary" level={5} style={props.style}>
{props.text}
</Typography.Title>
</Flex>
@@ -49,10 +51,10 @@ const App: React.FC = () => {
<Flex vertical gap="large">
<Splitter {...splitSharedProps} styles={stylesObject}>
<Splitter.Panel>
<Desc text="First" />
<Desc text="First" style={{ color: '#000' }} />
</Splitter.Panel>
<Splitter.Panel>
<Desc text="Second" />
<Desc text="Second" style={{ color: '#000' }} />
</Splitter.Panel>
</Splitter>
<Splitter {...splitSharedProps} styles={stylesFn}>

19
components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -11446,8 +11446,7 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
class="ant-transfer ant-transfer-status-error css-var-test-id"
>
<div
class="ant-transfer-section acss-qd6duc"
style="background-color: rgb(250, 250, 250);"
class="ant-transfer-section acss-yvv4da"
>
<div
class="ant-transfer-list-header acss-r4s437"
@@ -11859,8 +11858,7 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
</div>
</div>
<div
class="ant-transfer-actions"
style="background-color: rgb(255, 242, 232);"
class="ant-transfer-actions acss-rzg7ne"
>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
@@ -11922,8 +11920,7 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
</button>
</div>
<div
class="ant-transfer-section acss-qd6duc"
style="background-color: rgb(250, 250, 250);"
class="ant-transfer-section acss-yvv4da"
>
<div
class="ant-transfer-list-header acss-r4s437"
@@ -12289,8 +12286,8 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
class="ant-transfer ant-transfer-status-warning css-var-test-id"
>
<div
class="ant-transfer-section acss-qd6duc"
style="background-color: rgb(246, 255, 237); border-color: rgb(183, 235, 143);"
class="ant-transfer-section acss-yvv4da"
style="background-color: rgba(246, 255, 237, 0.6); border-color: rgb(183, 235, 143);"
>
<div
class="ant-transfer-list-header acss-r4s437"
@@ -12702,7 +12699,7 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
</div>
</div>
<div
class="ant-transfer-actions"
class="ant-transfer-actions acss-rzg7ne"
>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
@@ -12764,8 +12761,8 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
</button>
</div>
<div
class="ant-transfer-section acss-qd6duc"
style="background-color: rgb(246, 255, 237); border-color: rgb(183, 235, 143);"
class="ant-transfer-section acss-yvv4da"
style="background-color: rgba(246, 255, 237, 0.6); border-color: rgb(183, 235, 143);"
>
<div
class="ant-transfer-list-header acss-r4s437"

19
components/transfer/__tests__/__snapshots__/demo.test.ts.snap
View File

@@ -7431,8 +7431,7 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
class="ant-transfer ant-transfer-status-error css-var-test-id"
>
<div
class="ant-transfer-section acss-qd6duc"
style="background-color:#fafafa"
class="ant-transfer-section acss-yvv4da"
>
<div
class="ant-transfer-list-header acss-r4s437"
@@ -7769,8 +7768,7 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-transfer-actions"
style="background-color:#fff2e8"
class="ant-transfer-actions acss-rzg7ne"
>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
@@ -7832,8 +7830,7 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
</button>
</div>
<div
class="ant-transfer-section acss-qd6duc"
style="background-color:#fafafa"
class="ant-transfer-section acss-yvv4da"
>
<div
class="ant-transfer-list-header acss-r4s437"
@@ -8124,8 +8121,8 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
class="ant-transfer ant-transfer-status-warning css-var-test-id"
>
<div
class="ant-transfer-section acss-qd6duc"
style="background-color:#f6ffed;border-color:#b7eb8f"
class="ant-transfer-section acss-yvv4da"
style="background-color:rgba(246,255,237, 0.6);border-color:#b7eb8f"
>
<div
class="ant-transfer-list-header acss-r4s437"
@@ -8462,7 +8459,7 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
</div>
</div>
<div
class="ant-transfer-actions"
class="ant-transfer-actions acss-rzg7ne"
>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
@@ -8524,8 +8521,8 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
</button>
</div>
<div
class="ant-transfer-section acss-qd6duc"
style="background-color:#f6ffed;border-color:#b7eb8f"
class="ant-transfer-section acss-yvv4da"
style="background-color:rgba(246,255,237, 0.6);border-color:#b7eb8f"
>
<div
class="ant-transfer-list-header acss-r4s437"

13
components/transfer/demo/style-class.tsx
View File

@@ -3,9 +3,14 @@ import { Flex, Transfer } from 'antd';
import type { TransferProps } from 'antd';
import { createStyles } from 'antd-style';
const useStyles = createStyles(({ token }) => ({
section: { backgroundColor: '#fafafa' },
const useStyles = createStyles(({ token, css }) => ({
section: { backgroundColor: 'rgba(250,250,250, 0.5)' },
header: { color: token.colorPrimary },
actions: css`
& button {
background-color: rgba(255,242,232,0.6);
}
`,
}));
const mockData = Array.from({ length: 20 }).map<any>((_, i) => ({
@@ -17,15 +22,13 @@ const mockData = Array.from({ length: 20 }).map<any>((_, i) => ({
const initialTargetKeys = mockData.filter((item) => Number(item.key) > 10).map((item) => item.key);
const stylesObject: TransferProps['styles'] = {
section: { backgroundColor: '#fafafa' },
header: { fontWeight: 'bold' },
actions: { backgroundColor: '#fff2e8' },
};
const stylesFn: TransferProps['styles'] = (info) => {
if (info.props.status === 'warning') {
return {
section: { backgroundColor: '#f6ffed', borderColor: '#b7eb8f' },
section: { backgroundColor: 'rgba(246,255,237, 0.6)', borderColor: '#b7eb8f' },
header: { color: '#8DBCC7', fontWeight: 'normal' },
} satisfies TransferProps['styles'];
}