MarigoldProvider

The <MarigoldProvider> component serves as the wrapper for any application that integrates with Marigold. It is responsible for managing and distributing critical application-level settings, including providing theming to all child components.

By wrapping an app in <MarigoldProvider>, developers can ensure that a consistent theme and other globally relevant configurations are propagated throughout the app's component tree.

Appearance

The <MarigoldProvider> component does not have its own visual appearance. However, it hosts the root styles of a theme, ensuring that global styles and theming are applied across the entire app.

Usage

Setup

It is recommended to place <MarigoldProvider> in its own file, alongside other providers you may use, and wrap your root component with it. This approach keeps your project structure organized and ensures that global settings like theming are applied consistently across your app.

import { PropsWithChildren } from 'react';
import { MarigoldProvider } from '@marigold/components';
import theme from '@marigold/theme-rui';

export const App = ({ children }: PropsWithChildren) => (
  <MarigoldProvider theme={theme}>{children}</MarigoldProvider>
);

Overriding root styles

The <MarigoldProvider> supports overriding root styles by passing custom class names to it. This feature is useful when you need to adjust or customize the root styles, depending on the context in which your app is used.

import { Card, Inset, MarigoldProvider } from '@marigold/components';import theme from '@marigold/theme-rui';export default () => (  <MarigoldProvider theme={theme} className="rounded-lg">    <Inset p={6}>      <Card>        <Card.Content>          This card sits inside a MarigoldProvider whose root wrapper is styled          with rounded corners via the className prop.        </Card.Content>      </Card>    </Inset>  </MarigoldProvider>);

Nesting Providers

The <MarigoldProvider> supports nesting themes, allowing you to apply a different theme within a nested provider. This enables sections of your app to have distinct themes, providing flexibility in styling different parts of the application.

Note that in these scenarios, it often makes sense to adjust the root styles using the aforementioned className prop.

import { Card, MarigoldProvider, Stack } from '@marigold/components';
import ruiTheme from '@marigold/theme-rui';
import customTheme from './custom-theme';

export default () => (
  <MarigoldProvider theme={ruiTheme}>
    <Card p={4}>
      <Stack space={4}>
        This area uses the <strong>rui theme</strong>.
        <MarigoldProvider theme={customTheme} className="bg-transparent">
          This area uses the <strong>custom theme</strong>.
        </MarigoldProvider>
      </Stack>
    </Card>
  </MarigoldProvider>
);

Props

MarigoldProvider