SDK theming
Learn how to customize Monite components to match your website's design.
By default, all Monite components use the default component styling. However, there may be scenarios where you might want to customize this default styling to match the look and feel of your website's design or brand identity.
While the fundamental layouts of these Monite components are immutable, you can customize other component properties like colors, fonts, borders, e.t.c.
Overview
The Monite React SDK leverages Material UI to deliver a robust and dynamic theming mechanism that allows you to tailor the SDK's appearance to suit your application's unique style and branding.
A theme in Material UI is an object that specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.
Theming mechanism
To customize components, you must use Material UI's deepmerge
function imported from the @mui/utils
subpackage. The @mui/utils
package is automatically available when you download the React SDK package.
The deepmerge
function takes two themes as arguments and merges them to create a new one based on them.
import { defaultMoniteLightThemeOptions } from "@monite/sdk-react";
import { deepmerge } from "@mui/utils";
const customTheme = deepmerge(defaultMoniteLightThemeOptions, CUSTOM_THEME_OBJECT)
The first argument—defaultMoniteLightThemeOptions
—provides the default styling and theme for the React SDK components. The second argument is your theme object, where you specify your customized styling values. For more information, see Material UI theme.
Finally, pass the newly generated theme object using the theme
prop on the MoniteProvider
wrapper as shown:
import { defaultMoniteLightThemeOptions, MoniteProvider } from "@monite/sdk-react";
import { deepmerge } from "@mui/utils";
const customTheme = deepmerge(defaultMoniteLightThemeOptions, {
palette: {
...
},
typography: {
...
}
});
...
return (
<MoniteProvider theme={customTheme}>
...
</MoniteProvider>
);
The React SDK has default values for all component properties. You can update component properties using Material UI's theme variables within your theme object. This document only covers the most important theme variables. See the Material UI theming documentation for the complete list of variables.
.palette
: the.palette
object allows you to modify the color of the components to suit your brand design or identity. For more information, see Palette..typography
: the.typography
object handles text appearance for your components. This includes, font sizes, weights, line heights, letter spacings, e.t.c. for all components. For more information, see Typography.
Usage example
The following snippet shows an example theme object with detailed palette
and typography
objects:
import { defaultMoniteLightThemeOptions, MoniteProvider } from "@monite/sdk-react";
import { deepmerge } from "@mui/utils";
const customTheme = deepmerge(defaultMoniteLightThemeOptions, {
palette: {
mode: "light",
primary: {
main: "#42a5f5",
contrastText: "#fff",
},
background: {
paper: "#e3f2fd",
},
text: {
primary: "#000",
secondary: "#000",
},
success: {
main: "#1fb42b",
contrastText: "#fff"
},
},
typography: {
fontFamily: "Comic Sans MS, Comic Sans, cursive, monospace",
h2: {
fontSize: "26px",
fontWeight: "500",
},
h3: {
lineHeight: 1.13,
},
button: {
fontSize: "16px",
fontWeight: "300",
textTransform: "uppercase",
},
},
});
...
function App() {
return (
<MoniteProvider theme={customTheme}>
...
</MoniteProvider>
);
}
export default App
For the full list of variables and their configuration, see the Material UI documentation.
Updated about 1 month ago