diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx index b47a212d4a..6a7479dfec 100644 --- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx +++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx @@ -53,6 +53,19 @@ const sections = [ Object with a given structure, specified below, for defining the opinionated theme. - + + + + + style + + + + React.CSSProperties + + CSS properties for styling the provider. + - + ), diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx index f1f53e54d9..9b9b299640 100644 --- a/packages/lib/src/HalstackContext.tsx +++ b/packages/lib/src/HalstackContext.tsx @@ -35,6 +35,7 @@ type HalstackProviderPropsType = { labels?: DeepPartial; children: ReactNode; opinionatedTheme?: ThemeType; + style?: React.CSSProperties; }; const HalstackThemed = styled.div<{ coreTheme?: ThemeType }>` @@ -63,7 +64,7 @@ const createCoreTheme = (opinionatedTheme: ThemeType | undefined = {}) => { return newTheme; }; -const HalstackProvider = ({ labels, children, opinionatedTheme }: HalstackProviderPropsType): JSX.Element => { +const HalstackProvider = ({ labels, children, opinionatedTheme, style }: HalstackProviderPropsType): JSX.Element => { const parsedLabels = useMemo(() => (labels ? parseLabels(labels) : null), [labels]); const parsedCoreTheme = useMemo(() => { const theme = createCoreTheme(opinionatedTheme); @@ -71,7 +72,7 @@ const HalstackProvider = ({ labels, children, opinionatedTheme }: HalstackProvid }, [opinionatedTheme]); return ( - + {parsedLabels ? ( {children} ) : (