Learn how to style the ready-made flows of your website or application with material-ui. There are two ways to style your flows—through a generic theme that will be applied to all components for app styling consistency or an external CSS link to customize specific components.

Styling with theme object

The generic theme provider from material-ui allows a generic theme file to be applied to all components, including the one inside the iframes. This is an easy way to apply styles and change the default behavior of components.

Example of a theme object:

{
    palette:
         {
              type: "light",
              primary: {
                   contrastText: "#fff",
                   main: "#1D9E33",
                   dark: "#205627",
              },
             secondary: {
                  main: "#EAC27D",
              },
             text: {
                  primary: "#212B36",
                  secondary: "#637381",
              },
             background: { default: "#F5F6F7", },
             divider: "#E5E8EC",
          },
    typography: {
           fontFamily: "Nunito Sans, sans-serif", userSelect: "none",
       },
     overrides: {
          MuiTab: {
               root: {
                    textTransform: "capitalize",
                    fontWeight: "500",
                    color: "#212B36",
                   },
               textColorPrimary: "#212B36",
             },
         MuiTabPanel: {
            root: { padding: 0, },
            },
         MuiButton: {
              root: {
                   textTransform: "capitalize",
                   height: "40px",
                   fontSize: "15px", lineHeight: "24px",
                   fontWeight: "500",
                   letterSpacing: "0",
                   flexShrink: "0",
                   fontFamily: "IBM Plex Sans, sans-serif",
                 },
                 text: {
                      userSelect: "none",
                     },
           },
       },
    props: {
         // Name of the component ⚛️
         MuiTextField: {
         // The default props to change
              fullWidth: true,
              variant: "outlined",
              size: "small", },
          MuiButton: {
               fullWidth: true,
               disableElevation: true,
            },
       },
   }

For more details on how to style different components and all available options read more here.

Styling using external css link

Using an external CSS link is an easy way to style specific components or reuse existing app styles. To do this, the CSS file must be from the app origin and it must be passed when using the did-api provider.

//Example
<PlatformContext.Provider value={{ platform, appConfig: { cssLink: 'https://my-app.com/styles.css' } }}><Story /></PlatformContext.Provider>

In order to target individual component styling, we have a convention of adding a unique class name to each component. This way, it is easy to add custom styles to it. Furthermore, the CSS file can also contain generic styles using material ui classNames.

Example:

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.did-outlined-input {
  border: 1px solid red !important;
  width: 100px;
}

.did-digit-code-input {
    height: 20px;
}

.MuiOutlinedInput-input {
    background-color: red !important;
}

.MuiTypography-root {
    font-size: 24px
}

The preceding example uses both DID and Material-UI classNames, but also can contain generic styles such as font-family or other generic tags.