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}
) : (