diff --git a/src/OptionList.tsx b/src/OptionList.tsx index 4a54cce5a..78abe706b 100644 --- a/src/OptionList.tsx +++ b/src/OptionList.tsx @@ -329,8 +329,8 @@ const OptionList: React.ForwardRefRenderFunction = (_, r direction={direction} innerProps={virtual ? null : a11yProps} showScrollBar={showScrollBar} - className={contextClassNames?.list} - style={contextStyles?.list} + className={contextClassNames?.popup?.list} + style={contextStyles?.popup?.list} > {(item, itemIndex) => { const { group, groupOption, data, label, value } = item; @@ -363,7 +363,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r itemPrefixCls, optionPrefixCls, className, - contextClassNames?.listItem, + contextClassNames?.popup?.listItem, { [`${optionPrefixCls}-grouped`]: groupOption, [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled, @@ -403,7 +403,7 @@ const OptionList: React.ForwardRefRenderFunction = (_, r onSelectValue(value); } }} - style={{ ...contextStyles?.listItem, ...style }} + style={{ ...contextStyles?.popup?.listItem, ...style }} >
{typeof optionRender === 'function' diff --git a/src/Select.tsx b/src/Select.tsx index 39da90411..f278d6c3e 100644 --- a/src/Select.tsx +++ b/src/Select.tsx @@ -108,7 +108,8 @@ export type SelectHandler = T extends (infer E)[] ? E : T; -export type SemanticName = BaseSelectSemanticName | 'listItem' | 'list'; +export type SemanticName = BaseSelectSemanticName; +export type PopupSemantic = 'listItem' | 'list'; export interface SelectProps extends BaseSelectPropsWithoutPrivate { prefixCls?: string; diff --git a/src/SelectContext.ts b/src/SelectContext.ts index 8918e4935..9a78d1c54 100644 --- a/src/SelectContext.ts +++ b/src/SelectContext.ts @@ -7,6 +7,7 @@ import type { OnInternalSelect, SelectProps, SemanticName, + PopupSemantic, } from './Select'; import type { FlattenOptionData } from './interface'; @@ -15,8 +16,12 @@ import type { FlattenOptionData } from './interface'; * SelectContext is only used for Select. BaseSelect should not consume this context. */ export interface SelectContextProps { - classNames?: Partial>; - styles?: Partial>; + classNames?: Partial> & { + popup?: Partial>; + }; + styles?: Partial> & { + popup?: Partial>; + }; options: BaseOptionType[]; optionRender?: SelectProps['optionRender']; flattenOptions: FlattenOptionData[]; diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index b79b9a131..c39c271c0 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -2423,16 +2423,20 @@ describe('Select.Basic', () => { const customClassNames = { prefix: 'custom-prefix', suffix: 'custom-suffix', - list: 'custom-list', - listItem: 'custom-item', input: 'custom-input', + popup: { + list: 'custom-list', + listItem: 'custom-item', + }, }; const customStyle = { prefix: { color: 'red' }, suffix: { color: 'green' }, - list: { color: 'yellow' }, - listItem: { color: 'blue' }, input: { color: 'black' }, + popup: { + list: { color: 'yellow' }, + listItem: { color: 'blue' }, + }, }; const { container } = render(