Provider

<MarigoldProvider> is the container for all Marigold applications. It defines the theme and other application level settings. Without the <MarigoldProvider> you can't get the theme on your components. So it is necessary to use.

You just have to wrap your components around the <MarigoldProvider> to make it work. If you want to get more information about the setup go to Getting Started.


import { Button, MarigoldProvider } from '@marigold/components';
 
<MarigoldProvider theme={theme}>
  <Button variant="primary">Hello World!</Button>
</MarigoldProvider>;

Import


import { MarigoldProvider } from '@marigold/components';

Props

Property	Type	Default	Description
`children`	`ReactNode`	`none`	The children of the component.
`theme`	`Theme`	`none`	The use that should be used within the provider context.
`className`	`string`	`none`	Set a className to the outer div from your app.

Examples

Provider with Button

The example shows how the <MarigoldProvider> works. As simple as it is you just have to wrap the component around the provider and import a theme. You can click on the theme select on top of the page to see how the <Button> changes its theme.


import { Button, MarigoldProvider } from '@marigold/components';
 
<MarigoldProvider theme={theme}>
  <Button variant="primary">Hello World!</Button>
</MarigoldProvider>;