feat(IconProvider): add supprt for disableInlineStyles (#13)

rsuite · Oct 16, 2024 · 909c7f1 · 909c7f1
1 parent d3570b4
commit 909c7f1
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git 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<IconContextProps>({});

diff --git 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
@@ -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
@@ -1,6 +1,20 @@
 import React from 'react';
 import { Icon, IconProvider } from '../src';
 
+it('Should be able to disable inline styles', () => {
+  cy.mount(
+    <IconProvider
+      value={{
+        disableInlineStyles: true
+      }}
+    >
+      <Icon />
+    </IconProvider>
+  );
+
+  cy.get('style').should('not.exist');
+});
+
 it('Should custom classPrefix and have csp', () => {
   cy.mount(
     <IconProvider