diff --git a/src/util/genStyleUtils.tsx b/src/util/genStyleUtils.tsx index fcf0833..fd30205 100644 --- a/src/util/genStyleUtils.tsx +++ b/src/util/genStyleUtils.tsx @@ -27,6 +27,8 @@ import type { UseCSP } from '../hooks/useCSP'; import type { UsePrefix } from '../hooks/usePrefix'; import type { UseToken } from '../hooks/useToken'; +type LayerConfig = Parameters[0]['layer']; + export interface StyleInfo { hashId: string; prefixCls: string; @@ -115,6 +117,7 @@ function genStyleUtils< resetFont?: boolean, ) => CSSObject; getCompUnitless?: GetCompUnitless; + layer?: LayerConfig; }) { // Dependency inversion for preparing basic config. const { @@ -309,6 +312,10 @@ function genStyleUtils< const [component] = cells; const concatComponent = cells.join('-'); + const mergedLayer = config.layer || { + name: 'antd', + }; + // Return new style hook return (prefixCls: string, rootCls: string = prefixCls): UseComponentStyleResult => { const { theme, realToken, hashId, token, cssVar } = useToken(); @@ -342,9 +349,7 @@ function genStyleUtils< hashId, nonce: () => csp.nonce!, clientOnly: options.clientOnly, - layer: { - name: 'antd', - }, + layer: mergedLayer, // antd is always at top of styles order: options.order || -999, diff --git a/tests/genStyleUtils.test.tsx b/tests/genStyleUtils.test.tsx index 699c193..a550413 100644 --- a/tests/genStyleUtils.test.tsx +++ b/tests/genStyleUtils.test.tsx @@ -3,6 +3,7 @@ import { render, renderHook } from '@testing-library/react'; import { genStyleUtils } from '../src'; import type { CSSVarRegisterProps, SubStyleComponentProps } from '../src/util/genStyleUtils'; +import { createCache, StyleProvider } from '@ant-design/cssinjs'; interface TestCompTokenMap { TestComponent: object; @@ -23,6 +24,10 @@ describe('genStyleUtils', () => { }), useCSP: jest.fn().mockReturnValue({ nonce: 'nonce' }), getResetStyles: jest.fn().mockReturnValue([]), + layer: { + name: 'test', + dependencies: ['parent'], + }, }; const { genStyleHooks, genSubStyleComponent, genComponentStyleHook } = genStyleUtils< @@ -31,6 +36,12 @@ describe('genStyleUtils', () => { object >(mockConfig); + beforeEach(() => { + // Clear head style + const head = document.head; + head.innerHTML = ''; + }); + describe('genStyleHooks', () => { it('should generate style hooks', () => { const component = 'TestComponent'; @@ -89,4 +100,20 @@ describe('genStyleUtils', () => { expect(getByTestId('test-root')).toHaveTextContent('test-prefix'); }); }); + + it('layer', () => { + const StyledComponent = genSubStyleComponent( + 'TestComponent', + () => ({}), + () => ({}), + ); + + render( + + + , + ); + + expect(document.head.innerHTML).toContain('@layer parent,test;'); + }); });