replace StylesheetsContext provider and hooks usage

src/bricks/renderers/CustomFormComponent.tsx

@@ -34,6 +34,7 @@ import DescriptionField from "@/components/formBuilder/DescriptionField";
 import TextAreaWidget from "@/components/formBuilder/TextAreaWidget";
 import RjsfSubmitContext from "@/components/formBuilder/RjsfSubmitContext";
 import { cloneDeep } from "lodash";
+import { useStylesheetsContextWithFormDefault } from "@/components/StylesheetsContext";
 
 const FIELDS = {
   DescriptionField,
@@ -65,6 +66,7 @@ export type CustomFormComponentProps = {
   resetOnSubmit?: boolean;
   className?: string;
   stylesheets?: string[];
+  disableParentStyles?: boolean;
 };
 
 const CustomFormComponent: React.FunctionComponent<
@@ -78,7 +80,8 @@ const CustomFormComponent: React.FunctionComponent<
   className,
   onSubmit,
   resetOnSubmit = false,
-  stylesheets,
+  disableParentStyles = false,
+  stylesheets: newStylesheets,
 }) => {
   // Use useRef instead of useState because we don't need/want a re-render when count changes
   // This ref is used to track the onSubmit run number for runtime tracing
@@ -99,6 +102,11 @@ const CustomFormComponent: React.FunctionComponent<
     setKey((prev) => prev + 1);
   };
 
+  const { stylesheets } = useStylesheetsContextWithFormDefault({
+    newStylesheets,
+    disableParentStyles,
+  });
+
   const submitData = async (data: UnknownObject): Promise<void> => {
     submissionCountRef.current += 1;
     await onSubmit(data, {

src/bricks/renderers/documentView/DocumentView.tsx

@@ -23,10 +23,14 @@ import { type DocumentViewProps } from "./DocumentViewProps";
 import DocumentContext from "@/components/documentBuilder/render/DocumentContext";
 import { Stylesheets } from "@/components/Stylesheets";
 import { joinPathParts } from "@/utils/formUtils";
+import StylesheetsContext, {
+  useStylesheetsContextWithDocumentDefault,
+} from "@/components/StylesheetsContext";
 
 const DocumentView: React.FC<DocumentViewProps> = ({
   body,
-  stylesheets,
+  stylesheets: newStylesheets,
+  disableParentStyles,
   options,
   meta,
   onAction,
@@ -41,26 +45,33 @@ const DocumentView: React.FC<DocumentViewProps> = ({
     throw new Error("meta.extensionId is required for DocumentView");
   }
 
+  const { stylesheets } = useStylesheetsContextWithDocumentDefault({
+    newStylesheets,
+    disableParentStyles,
+  });
+
   return (
     // Wrap in a React context provider that passes BrickOptions down to any embedded bricks
     <DocumentContext.Provider value={{ options, onAction }}>
-      <Stylesheets href={stylesheets}>
-        {body.map((documentElement, index) => {
-          const documentBranch = buildDocumentBranch(documentElement, {
-            staticId: joinPathParts("body", "children"),
-            // Root of the document, so no branches taken yet
-            branches: [],
-          });
+      <StylesheetsContext.Provider value={{ stylesheets }}>
+        <Stylesheets href={stylesheets}>
+          {body.map((documentElement, index) => {
+            const documentBranch = buildDocumentBranch(documentElement, {
+              staticId: joinPathParts("body", "children"),
+              // Root of the document, so no branches taken yet
+              branches: [],
+            });
 
-          if (documentBranch == null) {
-            return null;
-          }
+            if (documentBranch == null) {
+              return null;
+            }
 
-          const { Component, props } = documentBranch;
-          // eslint-disable-next-line react/no-array-index-key -- They have no other unique identifier
-          return <Component key={index} {...props} />;
-        })}
-      </Stylesheets>
+            const { Component, props } = documentBranch;
+            // eslint-disable-next-line react/no-array-index-key -- They have no other unique identifier
+            return <Component key={index} {...props} />;
+          })}
+        </Stylesheets>
+      </StylesheetsContext.Provider>
     </DocumentContext.Provider>
   );
 };

src/bricks/renderers/documentView/DocumentViewProps.tsx

@@ -33,6 +33,10 @@ export type DocumentViewProps = {
    * Remote stylesheets (URLs) to include in the document.
    */
   stylesheets?: string[];
+  /**
+   * Whether to disable the base (bootstrap) styles, plus any inherited styles, on the document (and children).
+   */
+  disableParentStyles?: boolean;
 
   options: BrickOptions<BrickArgsContext>;
   meta: {

src/components/StylesheetsContext.ts

@@ -17,7 +17,7 @@
 
 import React, { useContext } from "react";
 import bootstrap from "@/vendors/bootstrapWithoutRem.css?loadAsUrl";
-import bootstrapOverrides from "@/pageEditor/sidebar/sidebarBootstrapOverrides.scss?loadAsUrl";
+import bootstrapOverrides from "@/sidebar/sidebarBootstrapOverrides.scss?loadAsUrl";
 import custom from "@/bricks/renderers/customForm.css?loadAsUrl";
 
 export type StylesheetsContextType = {