diff --git a/app/client/src/components/designSystems/appsmith/WidgetStyleContainer.tsx b/app/client/src/components/designSystems/appsmith/WidgetStyleContainer.tsx index 3a2b95a850..3671bb6545 100644 --- a/app/client/src/components/designSystems/appsmith/WidgetStyleContainer.tsx +++ b/app/client/src/components/designSystems/appsmith/WidgetStyleContainer.tsx @@ -19,6 +19,7 @@ export interface WidgetStyleContainerProps { containerStyle?: ContainerStyle; children?: ReactNode; borderColor?: Color; + backgroundColor?: Color; borderWidth?: number; borderRadius?: number; boxShadow?: BoxShadow; @@ -29,17 +30,18 @@ const WidgetStyle = styled.div` height: 100%; width: 100%; border-radius: ${({ borderRadius }) => borderRadius}; - box-shadow: ${(props) => props.boxShadow} !important; + box-shadow: ${(props) => props.boxShadow} !important; border-width: ${(props) => props.borderWidth}px; border-color: ${(props) => props.borderColor || "transparent"}; border-style: solid; + background-color: ${(props) => props.backgroundColor || "transparent"}; & > div { height: 100%; width: 100%; overflow: hidden; } -}`; +`; // wrapper component for apply styles on any widget boundary function WidgetStyleContainer(props: WidgetStyleContainerProps) { diff --git a/app/client/src/widgets/ContainerWidget/component/index.tsx b/app/client/src/widgets/ContainerWidget/component/index.tsx index c2f5c11f49..7ec7eabff2 100644 --- a/app/client/src/widgets/ContainerWidget/component/index.tsx +++ b/app/client/src/widgets/ContainerWidget/component/index.tsx @@ -51,7 +51,7 @@ const StyledContainerComponent = styled.div< : props.backgroundColor; }}; } -}`; +`; function ContainerComponentWrapper(props: ContainerComponentProps) { const containerStyle = props.containerStyle || "card"; @@ -94,6 +94,7 @@ function ContainerComponent(props: ContainerComponentProps) { {...pick(props, [ "widgetId", "containerStyle", + "backgroundColor", "borderColor", "borderWidth", "borderRadius",