alter ServiceSection to include background boolean

theopensystemslab · Oct 1, 2024 · 1f0744b · 1f0744b
1 parent 92950bc
commit 1f0744b
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/editor.planx.uk/src/ui/editor/SettingsSection.tsx b/editor.planx.uk/src/ui/editor/SettingsSection.tsx
@@ -3,7 +3,9 @@ import { styled } from "@mui/material/styles";
 import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
 import React, { ReactNode } from "react";
 
-const Root = styled(Box)(({ bgcolor, theme }) => ({
+const Root = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "background",
+})<BoxProps & { background?: boolean }>(({ background, theme }) => ({
   display: "block",
   width: "100%",
   marginTop: theme.spacing(2),
@@ -14,7 +16,7 @@ const Root = styled(Box)(({ bgcolor, theme }) => ({
   "& > * + *, & > form > * + *": {
     ...contentFlowSpacing(theme),
   },
-  ...(bgcolor && {
+  ...(background && {
     background: theme.palette.background.paper,
     marginTop: theme.spacing(2),
     padding: theme.spacing(2.5),
@@ -23,7 +25,7 @@ const Root = styled(Box)(({ bgcolor, theme }) => ({
 }));
 
 export default function SettingsSection(
-  props: { children: ReactNode } & Partial<BoxProps>,
+  props: { children: ReactNode; background?: boolean } & Partial<BoxProps>,
 ) {
   return <Root {...props}>{props.children}</Root>;
 }