diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.jsx b/platform/ui/src/components/ViewportPane/ViewportPane.jsx index 661d2e927..18016db44 100644 --- a/platform/ui/src/components/ViewportPane/ViewportPane.jsx +++ b/platform/ui/src/components/ViewportPane/ViewportPane.jsx @@ -6,7 +6,7 @@ import { useDrop } from 'react-dnd'; // NOTE: If we found a way to make `useDrop` conditional, // Or we provided a HOC of this component, we could provide // this UI without the DragAndDropContext dependency. -function ViewportPane({ children, isActive, onDrop }) { +function ViewportPane({ children, className, isActive, onDrop }) { const [{ isHovered, isHighlighted }, drop] = useDrop({ accept: 'displayset', // TODO: pass in as prop? @@ -37,7 +37,8 @@ function ViewportPane({ children, isActive, onDrop }) { { 'border-2 border-primary-light -m-px': isActive, 'border border-secondary-light': !isActive, - } + }, + className )} > {children} @@ -48,6 +49,8 @@ function ViewportPane({ children, isActive, onDrop }) { ViewportPane.propTypes = { /** The ViewportComp */ children: PropTypes.node.isRequired, + /** Classes to append to container */ + className: PropTypes.string, /** Bool to show active styling */ isActive: PropTypes.bool.isRequired, /** Function that handles drop events */