diff --git a/src/IconProvider.tsx b/src/IconProvider.tsx index 12b2309..af2a7bf 100644 --- a/src/IconProvider.tsx +++ b/src/IconProvider.tsx @@ -9,6 +9,12 @@ export interface IconContextProps { */ nonce?: string; }; + + /** + * Disable inline styles + * @default false + */ + disableInlineStyles?: boolean; } export const IconContext = createContext({}); diff --git a/src/utils/useIconContext.ts b/src/utils/useIconContext.ts index 40d7f32..e4f13c9 100644 --- a/src/utils/useIconContext.ts +++ b/src/utils/useIconContext.ts @@ -2,7 +2,11 @@ import { useContext } from 'react'; import { IconContext } from '../IconProvider'; export function useIconContext() { - const { classPrefix = 'rs-', csp } = useContext(IconContext) || {}; + const { classPrefix = 'rs-', csp, disableInlineStyles = false } = useContext(IconContext) || {}; - return { classPrefix, csp }; + return { + classPrefix, + csp, + disableInlineStyles + }; } diff --git a/src/utils/useInsertStyles.ts b/src/utils/useInsertStyles.ts index bb3451f..384c8a4 100644 --- a/src/utils/useInsertStyles.ts +++ b/src/utils/useInsertStyles.ts @@ -62,10 +62,10 @@ const getStyles = (prefix = 'rs-') => { let cssInjected = false; const useInsertStyles = () => { - const { csp, classPrefix } = useIconContext(); + const { csp, classPrefix, disableInlineStyles } = useIconContext(); useEffect(() => { // Make sure css injected once. - if (!cssInjected) { + if (!cssInjected && !disableInlineStyles) { insertCss(getStyles(classPrefix), { prepend: true, nonce: csp?.nonce }); cssInjected = true; } diff --git a/test/IconProvider.cy.tsx b/test/IconProvider.cy.tsx index 0978a2c..6167fec 100644 --- a/test/IconProvider.cy.tsx +++ b/test/IconProvider.cy.tsx @@ -1,6 +1,20 @@ import React from 'react'; import { Icon, IconProvider } from '../src'; +it('Should be able to disable inline styles', () => { + cy.mount( + + + + ); + + cy.get('style').should('not.exist'); +}); + it('Should custom classPrefix and have csp', () => { cy.mount(