ThemeProvider

A brief, introductory couple of sentences about the component. This is a second sentence just so that there’s a second line in this document. Think of this a teaser for the When/How to Use section.

Example #

ThemeProvider #

Wrap any number of components in a ThemeProvider to have those components reference the specified theme. That theme will be shallowly merged with the parent theme. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

SampleSample

() => {
	return (
		<DemoLayout>
			{/* This will affect all components inside this ThemeProvider that use this variable. */}
			<ThemeProvider theme={{ color_primary: 'mediumvioletred' }}>
				<Sample />
			</ThemeProvider>

			{/* This will affect all components inside this ThemeProvider that use this variable,
					which should only be Sample components due to the namespace. */}
			<ThemeProvider theme={{ Sample_color: 'mediumvioletred' }}>
				<Sample />
			</ThemeProvider>
		</DemoLayout>
	);
}

ThemeProvider Props #

Name	Type	Default	Description
children	MnrlReactNode		Components to which the theme will be applied
theme	Object	mineralTheme	A shallow object of theme variables and their values

Undocumented properties will be applied to the root element.

When/How to Use #

An explanation of when to use this component and basics about how to use it. Could also include when not to use this component, and which component should be used instead. More detailed how-to-use info is under Best Practices, below. It might be a couple of short sentences, or it could be a full paragraph or two.

Best Practices #

DO this practice

Example Link Component

Some text to explain why you should do this and when.

DON’T do this other practice

Example Link Component

Some text to explain why you should not do this.

DO this other practice

Some text to explain why you should do this and when.

DO this third practice

Example Link Component

Some text to explain why you should do this and when.

We welcome feedback and contributions on GitHub