Styling Guide

Advanced

General

Theming allows you to personalize the appearance of the nuvo importer. By modifying the theme, you can swiftly align the importer's style with your brand. This can be achieved by defining a few lines of code within the globals class. If you require more detailed customization, you have the flexibility to style each component individually. This includes an extensive range of options, from controlling the hover animation to adjusting the border radius.

Render custom upload button (deprecated)

The renderUploadButton property enables you to customize the appearance of the button used to initiate the import process. By utilizing the launch parameter, you can invoke it within the desired HTML event. Refer to the example below for further clarification:

caution

renderUploadButton has been deprecated for React since v2.11, for vanilla JS and Angular since v2.9 and for Vue.js since v.2.10. For styling the import button use buttons.import.

<NuvoImporter
  licenseKey="Your License Key"
  renderUploadButton={({ launch }) => (
    <button onClick={() => launch()}>Click here</button>
  )}
  settings={{...}}
/>

Quick start (Simplified styling)

Having a fast implementation of the nuvo importer is crucial for quickly reaping its benefits. However, whitelabeling often poses a challenge and can delay the go-live process. To address this, we offer a convenient styling option that requires just a few lines of code. With this option, you can easily customize our importer to align it with your brand guidelines.

To achieve this, utilize our globals class, which allows you to adjust various elements such as the background color, font family, text color, border radius, primary color, and secondary color. The primary and secondary colors affect the button colors and numerous table elements within the importer. By leveraging this simplified styling option, you can implement your style guide more efficiently, including support for dark mode.

In case the styling options provided by the globals class do not fully meet your requirements, we recommend utilizing the buttons class before delving into advanced styling techniques.

globals

The globals key helps you implement a general and global theming. Its options are generic and easy to use. The available keys are the following:

• textColor - This sets the default color for the text of the nuvo importer. This text color does not apply to the text of the table within the "Header Selection" and "Review Entries" steps. To control this instead, you will find other options below.
• fontFamily - This enables you to use your preferred font within the nuvo importer.
• backgroundColor - This allows you to control the general background color of the nuvo importer.
• primaryTextColor - This and the following key enable you to define different text font colors within the nuvo importer more specifically.
• secondaryTextColor - Like mentioned above, this is a more specific styling than the textColor key.
• primaryColor - This allows you to implement your primary color of your brand style. This key influences the primary buttons as well as many table elements inside the importer.
• secondaryColor - This allows you to implement your secondary color of your brand style.
• borderRadius - This key allows you to define the border radius of the modal. Necessary, you will only see an effect if modal is set to false.
• maxHeight(deprecated) - This key helps you to define a maximum height of the iframe.

info

The maxHeight attribute is now deprecated and is only supported in vanilla JavaScript, Angular versions 2.8 or lower, and Vue.js versions 2.9 or lower.

To get an idea of how quick whitelabeling can be achieved, refer to the code snippets below:

React

<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
    style: {
      globals: {
        textColor: "#162338",
        fontFamily: "arial",
        backgroundColor: "#f1f1f1",
        primaryTextColor: "#111111",
        secondaryTextColor: "#143a52",
        primaryColor: "#ffcc02",
        secondaryColor: "#d40511",
        borderRadius: "10px",
      },
    },
  }}
/>

Angular

1. Add the nuvo component in the HTML file.

<nuvo-importer [licenseKey]="licenseKey" [settings]="settings" />

2. Define the property in the component file.

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "customer_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
    style: {
      globals: {
        textColor: "#162338",
        fontFamily: "arial",
        backgroundColor: "#f1f1f1",
        primaryTextColor: "#111111",
        secondaryTextColor: "#143a52",
        primaryColor: "#ffc116",
        secondaryColor: "#162338",
        borderRadius: "5px"
      }
    },
  }
}

Vue

info

We're phasing out support for Vue 2. If you're still using Vue 2, you can use "nuvo-vuejs" v2.9 or lower.

1. Add the nuvo component inside the <template> tag in the file App.vue.

<template>
  <div id="app">
    <NuvoImporter :settings="settings" :licenseKey="licenseKey" />
  </div>
</template>

2. Define the property inside the <script> tag in the component file.

export default {
  name: "App",
  components: {
    NuvoImporter,
  },
  setup() {
    const settings = {
      developerMode: true,
      identifier: "product_data",
      columns: [
        {
          label: "Product ID",
          key: "product_id",
        },
        {
          label: "Article Name",
          key: "article_name",
        },
      ],
      style: {
        globals: {
          textColor: "#162338",
          fontFamily: "arial",
          backgroundColor: "#f1f1f1",
          primaryTextColor: "#111111",
          secondaryTextColor: "#143a52",
          primaryColor: "#ffc116",
          secondaryColor: "#162338",
          borderRadius: "5px",
        },
      },
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
};

JavaScript

info

Our vanilla JS syntax has changed since v2.9. If you use v2.8 or lower, please migrate to the latest version by following our migration guide.

<div class="nuvo-container" />
<script type="module">
  import { launchNuvoImporter } from "nuvo-vanilla-js";

  launchNuvoImporter(".nuvo-container", {
    licenseKey: "Your License Key",
    settings: {
      developerMode: true,
      identifier: "product_data",
      columns: [
        {
          label: "Product ID",
          key: "product_id",
        },
        {
          label: "Article Name",
          key: "article_name",
        },
      ],
      style: {
        globals: {
          textColor: "#162338",
          fontFamily: "arial",
          backgroundColor: "#f1f1f1",
          primaryTextColor: "#111111",
          secondaryTextColor: "#143a52",
          primaryColor: "#ffc116",
          secondaryColor: "#162338",
          borderRadius: "5px",
        },
      },
    },
  });
</script>

Advanced styling

The example above demonstrates how the globals class can be utilized to swiftly customize the theme of the nuvo importer according to your branding. If you wish to fine-tune the styling to achieve a better alignment with your brand, you can make use of the other keys available in the style class. Each key within the style class corresponds to a specific area of the importer that can be modified. In the following section, we will provide a comprehensive overview of each key and guide you on their proper usage.

Below is a list of all the available keys:

style: {
  globals: {},
  root: {},
  buttons: {},
  progressBar: {},
  header: {},
  dropzone: {},
  footer: {},
  sheetSelect: {},
  headerSelect: {},
  joinSheet: {},
  columnMatch: {},
  reviewEntries: {},
  popover: {},
  dialog: {},
  messagePopup: {},
  popoverInfo: {},
  loader: {},
  cleaningAssistant: {},
  contextualEngine: {}
}

root

Root styles apply to the main element of the nuvo importer.

• container - Control the styles of the root container of the nuvo importer.

style: {
  root: {
    container: {
      padding: 0;
    }
  }
}

buttons

If you want to change the styling of the nuvo importer buttons, you can use the buttons key for it.

• primary - This allows you to control the primary buttons within the nuvo importer like the "Select file" and "Continue" button.
• secondary - This will control the secondary buttons within the nuvo importer like the "Manual entry" and "Edit data" button.
• tertiary– This will control the tertiary buttons within the nuvo importer like the "Back" buttons and the template buttons.
• import– This will control the "Import data" button. If buttons.import is not set, the styles of the "Import data" button will default to the style defined in the buttons.primary. If there's no style defined in the buttons.primary either, it will default to the globals.primaryColor.
• cleanData - This allows you to control the "Clean data"-button within the nuvo importer. By using icon.backgroundImage, you can replace the button’s icon, and by setting icon.display to "none", you can remove the button’s icon entirely.
• exportExcel - This allows you to control the "Export as Excel"-button within the nuvo importer. By using icon.backgroundImage, you can replace the button’s icon, and by setting icon.display to "none", you can remove the button’s icon entirely.
• findError – This allows you to control the "Find error"-button within the nuvo importer. By using icon.backgroundImage, you can add an icon to the button.
• findReplace – This allows you to control the "Find & replace"-button within the nuvo importer. By using icon.backgroundImage, you can replace the button’s icon, and by setting icon.display to "none", you can remove the button’s icon entirely.
• manualEntry(deprecated) - This will control the manualEntry button for allowManualInput is enabled within the nuvo importer.
• editData(deprecated) - This will control the editData button for buttonMode is edit or both within the nuvo importer.

In the following, you can see an example of a style object using the buttons key:

style: {
  buttons: {
    primary: {
      backgroundColor: "#ffc116",
      borderColor: "#ffc116",
      color: "#ffffff",
      padding: "4px 8px",
      fontSize: "16px",
      borderRadius: "6px",
      ":hover": {
        backgroundColor: "#D09E13",
        borderColor: "#D09E13",
      },
      ":active": {
        backgroundColor: "#856612",
        borderColor: "#D09E13",
      },
    },
    secondary: {
      backgroundColor: "#ffffff",
      borderColor: "#ffc116",
      color: "#ffc116",
      padding: "4px 8px",
      fontSize: "16px",
      borderRadius: "6px",
      ":hover": {
        backgroundColor: "#ffffff",
        borderColor: "#D09E13",
        color: "#D09E13",
      },
      ":active": {
        backgroundColor: "#FFFFFF",
        borderColor: "#D09E13",
        color: "#D09E13",
      },
    },
    tertiary: {
      backgroundColor: "#ffffff",
      borderColor: "#143a52",
      color: "#143a52",
      padding: "4px 8px",
      fontSize: "16px",
      borderRadius: "6px",
      ":hover": {
        backgroundColor: "#ffffff",
        borderColor: "#24516D",
        color: "#24516D",
      },
      ":active": {
        backgroundColor: "#FFFFFF",
        borderColor: "#0C3046",
        color: "#0C3046",
      },
    },
    impоrt: {
      backgroundColor: "#5c8ef2",
      borderColor: "#5c8ef2",
      color: "#ffffff",
      padding: "4px 8px",
      fontSize: "16px",
      borderRadius: "6px",
      ":hover": {
        backgroundColor: "#3573ef",
        borderColor: "#3573ef"
      },
      ":active": {
        backgroundColor: "#1152d5",
        borderColor: "#1152d5"
      },
    },
    cleanData: {
      backgroundColor: "#ffffff",
      borderColor: "#143a52",
      color: "#143a52",
      padding: "4px 8px",
      fontSize: "16px",
      borderRadius: "6px",
      ":hover": {
        backgroundColor: "#ffffff",
        borderColor: "#24516D",
        color: "#24516D",
      },
      ":active": {
        backgroundColor: "#FFFFFF",
        borderColor: "#0C3046",
        color: "#0C3046",
      },
      icon: {
        stroke: "yellow",
        color: "yellow"
      }
    },
    exportExcel: {
      backgroundColor: "#ffffff",
      borderColor: "#ffc116",
      color: "#ffc116",
      padding: "4px 8px",
      fontSize: "16px",
      borderRadius: "6px",
     ":hover": {
        backgroundColor: "#ffffff",
        borderColor: "#D09E13",
        color: "#D09E13",
      },
       ":active": {
        backgroundColor: "#FFFFFF",
        borderColor: "#D09E13",
        color: "#D09E13",
      },
      icon: {
        stroke: "yellow",
        color: "yellow"
      }
    },
    findError: {
      backgroundColor: "#5c8ef2",
      borderColor: "#5c8ef2",
      color: "#ffffff",
      padding: "4px 8px",
      fontSize: "16px",
      borderRadius: "6px",
      ":hover": {
        backgroundColor: "#3573ef",
        borderColor: "#3573ef",
        color: "#ffffff",
      },
      ":active": {
        backgroundColor: "#1152d5",
        borderColor: "#1152d5",
        color: "#ffffff",
      },
      icon: {
        stroke: "yellow",
        color: "yellow"
      }
    },
    findReplace: {
      backgroundColor: "#ffc116",
      borderColor: "#ffc116",
      color: "#ffffff",
      padding: "4px 8px",
      fontSize: "16px",
      borderRadius: "6px",
      ":hover": {
        backgroundColor: "#D09E13",
        borderColor: "#D09E13",
      },
      ":active": {
        backgroundColor: "#856612",
        borderColor: "#D09E13",
      },
      icon: {
        stroke: "yellow",
        color: "yellow"
      }
    },
  },
}

info

The remaining keys below will all use a root option. This option controls the basic styling of the section. This allows you to control the backgroundColor, border, borderRadius, and the padding, while the more determined options within each key will control fontWeight, fontSize, and color.

progressBar

The progressBar key allows the theming of the progress bar starting at the top left of the nuvo importer that displays the steps of the import process, which have already been completed, are currently on, and which are still coming. In the following, all options for this key are listed:

• root - This allows you to control the base stylings of the section.
• icon - This setting controls the icon of the section.
• current - This allows you to control the styling of the current step.
• complete - Controls the theming of the completed steps.
• incomplete - Controls the styling of the incomplete steps.

style: {
  progressBar: {
    root: {
      backgroundColor: "grey",
      borderRadius: "7px",
      border: "1px solid white",
      padding: "20px"
    },
    icon: {
      color: "red",
    },
    current: {
      color: "darkblue",
      fontSize: "18px",
      fontWeight: "600"
    },
    complete: {
      color: "green"
    },
    incomplete: {
      color: "yellow"
    }
  }
}

header

By using the header key, you can control the theming of the header section. The header section is placed between the progressbar and the dropzone within the "Upload" step, between the progressbar and headerMatch within the "Header Selection" step and between the progressbar and the sheetSelect within the "Sheet Selection" step. Here are the available options listed:

• root - This allows you to control the base stylings of the section.
• title - This setting controls the header title styles in the upper left.
• description - Controls the header description styles below the title.

style: {
  header: {
    root: {
      backgroundColor: "#E1E1E1"
    },
    title: {
      color: "darkblue",
      fontSize: "10px"
    },
    description: {
      color: "black",
      fontSize: "8px"
    }
  }
}

dropzone

This setting allows for controlling the drag and drop area, also called dropzone section, that is displayed when the nuvo importer is launched. The button inside of this section is controlled by the buttons key mentioned above. Therefore the button can't be controlled by this setting. Here are the available options for use:

• root - This allows you to control the base stylings of the dropdown section.
• icon - This setting controls the file icons of the dropdown section.
• content - Controls the stylings of the "Download Template" tile. It contains the same theming options as root with additional nested options for content: root, title, description and illustration.
• container - Controls the stylings of the dropzone container.

style: {
  dropzone: {
    root: {
      backgroundColor: "#E1E1E1",
      border: "1px solid black"
    },
    icon: {
      box: {
        fill: "black"
      }
    },
    content: {
      root: {
        backgroundColor: "#E1E1E1",
        border: "1px solid black",
        borderRadius: "20px",
        padding: "40px 60px",
      },
      title: {
        color: "darkblue",
      },
      description: {
        color: "green",
      },
      illustration: {
        borderColor: "red",
        headerColor: "green",
        circleHeaderColor: "blue",
        circleRowColor: "brown",
        downloadIconColor: "gray",
        shadowColor: "#E0EAFD"
      }
    },
    container: {
      padding: 0
    }
  }
}

info

The "Download Template" tile is only displayed when modal and embedUploadArea is set to true, and disableTemplates is not set to true.

footer

The footer key can be used to control the root styling of the nuvo importer's bottom. It only contains the root key:

• root - This allows you to control the base stylings of the footer.

style: {
  footer: {
    root: {
      backgroundColor: "#E1E1E1";
    }
  }
}

sheetSelect

With this key you can access and change the style of the elements of the "Sheet Selection" step of the nuvo importer.

• root - Controls the base stylings for the section.
• pageHeader - Controls the base stylings for the header of the page.
• header - Controls the theming of the header text.
• sheetName - Controls the file tab on the left side of the section with nested options for sheetName: root, title, description and border.
• grid - Controls the styles of the sheet selection section in grid mode with additional options nested: root, title, description, checkbox and illustration.
• list - Controls the styles of the sheet selection section in list mode with additional options nested: root, title, description and checkbox.
• pagination - Controls the stylings of the pagination in the bottom left with the following options nested: root, pageButton, pageMore, currentPageButton, nextButton and prevButton.
• icon - Controls the color of both icons in the top right.
• sheetLists - Controls the styles of the layout of the file tab which is on the left side of the section with options nested: root.
• scrollbar - Controls the styles of the scrollbar of the file tab which is on the left side and the styles of the scrollbar of the sheet selection section with options nested: backgroundColor and navigatorColor.
• unSelectSheetName Controls the styles of the file tab when it's not selected. This apply when multipleFileUpload is true. The nested options are root, title, description and border.
• addFileButton Controls the styles of add file button which is on the left side. This button is visible when multipleFileUpload is true. The nested options are root and icon.
• sheetPreview Controls the styles of sheet preview feature.

style: {
  sheetSelect: {
    root: {
      backgroundColor: "#E1E1E1",
      border: "1px solid black",
    },
    pageHeader: {
      root: {
        backgroundColor: "#fd79a8"
      },
      title: {
        fontSize: "18px"
      },
      description: {
        fontSize: "14px"
      }
    },
    header: {
      color: "red",
    },
    sheetName: {
      root: {
        backgroundColor: "yellow"
      },
      title: {
        color: "green"
      },
      description: {
        color: "orange"
      },
      border: {
        backgroundColor: "#143a52"
      }
    },
    grid: {
      root: {
        backgroundColor: "yellow"
      },
      title: {
        color: "green"
      },
      description: {
        color: "orange"
      },
      checkbox: {
        backgroundColor: "red"
      },
      illustration: {
        borderColor: "red",
        cellColor: "red",
        headerColor: "red",
        outlineColor: "red"
      },
      checked: {
        root: {
          borderColor: "red",
          backgroundColor: "blue",
          backgroundColor: "yellow"
        },
        title: {
          color: "green"
        },
        description: {
          color: "yellow"
        },
        checkbox: {
          backgroundColor: "red"
        },
        illustration: {
          borderColor: "red",
          cellColor: "red",
          headerColor: "red",
          outlineColor: "red"
        }
      }
    },
    list: {
      root: {
        backgroundColor: "yellow"
      },
      title: {
        color: "green"
      },
      description: {
        color: "orange"
      },
      checkbox: {
        backgroundColor: "red"
      },
      checked: {
        root: {
          borderColor: "red",
          backgroundColor: "blue",
          backgroundColor: "yellow"
        },
        title: {
          color: "green"
        },
        description: {
          color: "yellow"
        },
        checkbox: {
          backgroundColor: "red"
        }
      }
    },
    pagination: {
      currentPageButton: {
        backgroundColor: "red",
        color: "white"
      }
    },
    icon: {
      stroke: "red"
    },
    sheetLists: {
      root: {
        backgroundColor: "brown"
      }
    },
    scrollbar: {
      backgroundColor: "blue",
      navigatorColor: "red",
    },
    unSelectSheetName: {
      root: {
        backgroundColor: "green"
      },
      title: {
        color: "pink"
      },
      description: {
        color: "purple"
      },
      border: {
        backgroundColor: "green"
      }
    },
    addFileButton: {
      root: {
        backgroundColor: "red",
        color: "blue",
      },
      icon: {
        stroke: "green"
      }
    },
    sheetPreview: {
      title: {
        color: "#eb3b5a"
      },
      fileName: {
        color: "#fa8231"
      },
      sheetName: {
        color: "#20bf6b"
      },
      listButton: {
        color: "#fc5c65"
      },
      gridButton: {
        background: "#fc5c65"
      },
      table: {
        root: {
          background: "#a55eea"
        },
        th: {
          color: "#26de81"
        },
        td: {
          color: "#4b7bec"
        }
      }
    }
  }
}

headerSelect

headerMatch controls the theming of the "Select Header" step of the nuvo importer. All available keys are listed below:

• root - Controls the base stylings for the section.
• pageHeader - Controls the base stylings for the header of the page.
• content - Controls the theming of the table content.
• sheetName - Controls the sheet name badge placed at the top left with additional nested options for sheetName: root, title, description and border
• fullscreen – Controls the fullscreen icon on the top right of the section. Important: This icon is only displayed when your screen width is above 1910px.
• table - Controls the table of the "Select Header" step. The nested options are table elements, for example, td, th, scrollbar, selectRowColor, etc.
• progressBar - Controls the style of the progress bar when multipleFileUpload is true and at least two sheets are selected by the user. The nested options are root and progress.
• sheetNameSelected - Controls the selected sheet name badge placed at the top left. The nested options are root, title, description and border.

style: {
  headerSelect: {
    root: {
      borderRadius: "20px"
    },
    pageHeader: {
      root: {
        backgroundColor: "#fd79a8"
      },
      title: {
        fontSize: "18px"
      },
      description: {
        fontSize: "14px"
      }
    },
    content: {
      fontSize: "12px",
      color: "red"
    },
    sheetName: {
      root: {
        backgroundColor: "grey",
        borderRadius: "5px",
        padding: "8px"
      },
      title: {
        color: "orange"
      },
      description: {
        color: "yellow"
      },
      border: {
        backgroundColor: "#143a52"
      }
    },
    fullScreen: {
      root: {
        width: 200
      },
      icon: {
        stroke: "red"
      }
    },
    table: {
      th: {
        backgroundColor: "#E1E1E1",
        borderColor: "black",
        color: "yellow"
      },
      td: {
        backgroundColor: "#f2f2f2",
        borderColor: "black"
      },
      scrollbar: {
        navigatorColor: "#4b357f",
        backgroundColor: "#e9e6ef"
      },
      selectRowColor: "yellow"
    },
    progressBar: {
      root: {
        backgroundColor: "red"
      },
      progress: {
        navigatorColor: "blue",
        backgroundColor: "green",
      }
    },
    sheetNameSelected: {
      root: {
        backgroundColor: "grey",
        borderRadius: "5px",
      },
      title: {
        color: "orange"
      },
      description: {
        color: "yellow"
      },
      border: {
        backgroundColor: "#143a52"
      }
    }
  }
}

joinSheet

With joinSheet the theming of the elements within the "Join Sheets" step can be controlled. Here are the available keys:

• root - Controls the styles of the background in each table displaying example data from the sheet.
• pageHeader - Controls the base stylings for the header of the page.
• content - Controls the styles of the table content which is displayed as example data from the sheet.
• table - Controls the styles of table where example data from each sheet is displayed.
• sheetPreview - Controls the styles of sheet preview feature.
• joinPopover - Controls the style of the joined sheet popover.
• sheetSelection - Controls the styles of the sheet selection.
• appendColumnsDialog - Controls the dialogue styles for append data.
• joinColumnsDialog - Controls the dialogue styles for joining data.
• removedSheet - Controls the styles of the removed sheet section.

style: {
  joinSheet: {
    root: {
      backgroundColor: "green",
      borderRadius: "20px",
    },
    pageHeader: {
      root: {
        backgroundColor: "#fd79a8"
      },
      title: {
        fontSize: "18px"
      },
      description: {
        fontSize: "14px"
      }
    },
    content: {
      backgroundColor: "white"
    },
    table: {
      empty: {
        description: {
          color: red
        },
        title: {
          color: blue
        },
        root: {
          backgroundColor: green
        },
        content: {
          backgroundColor: "black"
        }
      },
      root: {
        backgroundColor: "black"
      },
      badge: {
        backgroundColor: "green",
        color: "red"
      },
      scrollbar: {
        backgroundColor: "red",
        navigatorColor: "green"
      },
      td: {
        backgroundColor: "red"
      },
      th: {
        backgroundColor: "yellow"
      }
    },
    sheetPreview: {
      fileName: {
        color: "red"
      },
      sheetName: {
        color: "blue"
      },
      title: {
        color: "green"
      },
      table: {
        root: {
          backgroundColor: "red"
        },
        scrollbarBackgroundColor: "red",
        scrollbarNavigatorColor: "green",
        td: {
          backgroundColor: "red"
        },
        th: {
          backgroundColor: "yellow"
        }
      }
    },
    sheetSelection: {
      root: {
        backgroundColor: "rgba(0, 0, 255, 0.7)"
      },
      title: {
        color: "red"
      },
      badge: {
        backgroundColor: "red",
        color: "white"
      },
      empty: {
        backgroundColor: "red"
      },
      joinedSheets: {
        root: {
          backgroundColor: "gold"
        }
      },
      scrollbar: {
        backgroundColor: "red",
        navigatorColor: "green"
      },
      sheet: {
        title: {
          color: "red"
        },
        description: {
          color: "blue"
        },
        root: {
          backgroundColor: "greenyellow"
        },
        addButton: {
          backgroundColor: "red",
          color: "blue",
          ":hover": {
            backgroundColor: "blue",
            color: "white"
          }
        },
        addMenu: {
          root: {
            backgroundColor: "blue"
          },
          item: {
            backgroundColor: "red",
            color: "purple",
            ":hover": {
              backgroundColor: "green"
            },
            ":disabled": {
              color: "yellow"
            }
          }
        },
        removeButton: {
          backgroundColor: "blue",
          color: "red"
        },
        previewButton: {
          color: "blue",
          backgroundColor: "white"
        }
      },
      unselectedSheets: {
        root: {
          backgroundColor: "green"
        }
      }
    },
    appendColumnsDialog: {
      root: {
        backgroundColor: "violet"
      },
      overlay: {
        backgroundColor: "blue"
      },
      closeIcon: {
        stroke: "yellow"
      },
      title: {
        color: "red"
      },
      description: {
        color: "blue"
      },
      label: {
        color: "blue"
      },
      asterisk: {
        color: "white"
      },
      dropdown: {
        scrollbar: {
          navigatorColor: "purple",
          backgroundColor: "yellow"
        },
        search: {
          root: {
            borderColor: "blue",
            backgroundColor: "black",
            color: "blue"
          },
          icon: {
            color: "red"
          },
          placeholder: {
            color: "green"
          }
        },
        root: {
          backgroundColor: "greenyellow"
        },
        selectedOption: {
          backgroundColor: "black"
        },
        button: {
          root: {
            backgroundColor: "yellow",
            color: "green",
            borderColor: "red",
          },
          icon: {
            color: "red"
          },
          placeholder: {
            color: "red"
          }
        },
        header: {
          backgroundColor: "red",
          color: "white"
        },
        option: {
          backgroundColor: "blue",
          color: "white",
        },
        badge: {
          backgroundColor: "blueviolet",
          color: "white"
        },
        joinBadge: {
          backgroundColor: "orangered",
          color: "white"
        }
      },
      appendColumn: {
        backgroundColor: "red",
        borderColor: "green"
      }
    },
    joinColumnsDialog: {
      root: {
        backgroundColor: "pink"
      },
      overlay: {
        backgroundColor: "red"
      },
      scrollbar: {
        navigatorColor: "blue",
        backgroundColor: "black"
      },
      closeIcon: {
        stroke: "red"
      },
      title: {
        color: "white"
      },
      description: {
        color: "red"
      },
      dropdown: {
        scrollbar: {
          navigatorColor: "purple",
          backgroundColor: "yellow"
        },
        search: {
          root: {
            borderColor: "blue",
            backgroundColor: "black",
            color: "blue"
          },
          icon: {
            color: "red"
          },
          placeholder: {
            color: "green"
          }
        },
        root: {
          backgroundColor: "greenyellow"
        },
        selectedOption: {
          backgroundColor: "black"
        },
        button: {
          root: {
            backgroundColor: "yellow",
            color: "green",
            borderColor: "red",
          },
          icon: {
            color: "red"
          },
          placeholder: {
            color: "red"
          }
        },
        header: {
          backgroundColor: "red",
          color: "white"
        },
        option: {
          backgroundColor: "blue",
          color: "white",
         }
        },
        badge: {
          backgroundColor: "blueviolet",
          color: "white"
        },
        joinBadge: {
          backgroundColor: "orangered",
          color: "white"
        }
      },
      deleteButton: {
        backgroundColor: "blue",
        color: "yellow"
      },
      label: {
        color: "red"
      },
      asterisk: {
        color: "blue"
      },
      matchStatus: {
        success: {
          percent: {
            color: "red"
          },
          icon: {
            color: "yellow"
          },
          root: {
            backgroundColor: "blue"
          },
          description: {
            color: "white"
          }
        },
        warning: {
          percent: {
            color: "green"
          },
          icon: {
            color: "blue"
          },
          root: {
            backgroundColor: "black"
          },
          description: {
            color: "red"
          }
        }
      }
    },
    removedSheet: {
      root: {
        backgroundColor: "red"
      },
      sheetName: {
        backgroundColor: "blue"
      },
      column: {
        color: "white"
      }
    }
  }
}

columnMatch

With the columnMatch key, the theming of the elements within the "Match Columns" step can be controlled. Here are the available keys:

• root - Controls the base theming of the section.
• pageHeader - Controls the base stylings for the header of the page.
• icon - Controls the color of the expand and collapse arrow.
• matchingTitle - Controls the stylings of the matching title, which is shown in the first row on the right side of each matching tile.
• matchingPercent - Controls the stylings of the row value percentage, which is shown in the second row on the right side of each matching tile.
• notMatchingValue - Controls the stylings of the row, which is shown in the third row on the right side of each matching tile. Important: This row is only displayed when not all unique values of an imported column are matched with a dropdown option of a category column.
• columnMatchHeader - Controls the header stylings for the left section of each matching tile with addition options: root, icon and dropdown
• columnMatchValue - Controls the stylings of the value rows displayed inside the left section of each matching tile. It also contains additional nested options: root, icon, scrollbar, and dropdown
• requiredColumns - Controls the stylings of the "Required Columns" section within the footer.
• dialogCreateCustomColumn - Controls the styling of the modal and content which shows form for create custom column. The nested options are root, overlay, closeIcon, title, description, columnName, columnType and dateFormat.
• dialogCreateCustomOption - Controls the styling of the modal and content which shows form for create custom option. The nested options are root, overlay, closeIcon, title, description, optionName and optionType.
• columnPopover - Controls the style of the showing column name popover.
• joinBadge - Controls the style of the join badge.
• sheetInfo - Controls the style of the sheet info icon.

style: {
  columnMatch: {
    root: {
      color: "blueviolet",
      borderColor: "red"
    },
    pageHeader: {
      root: {
        backgroundColor: "#fd79a8"
      },
      title: {
        fontSize: "18px"
      },
      description: {
        fontSize: "14px"
      }
    },
    icon: {
      color: "black"
    },
    matchingTitle: {
      root: {
        backgroundColor: "tomato"
      },
      icon: {
        color: "green"
      },
      checkIcon: {
        color: "chocolate"
      },
    },
    matchingPercent: {
      root: {
        backgroundColor: "green",
        color: "yellow"
      },
      icon: {
        color: "pink"
      },
    },
    notMatchingValue: {
      root: {
        backgroundColor: "green",
        color: "red"
      },
      icon: {
        color: "red"
      },
    },
    columnMatchHeader: {
      root: {
        backgroundColor: "burlywood",
        borderColor: "tomato",
        color: "burlywood"
      },
      icon: {
        stroke: "yellow"
      },
      dropdown: {
        scrollbar: {
          backgroundColor: "purple",
          navigatorColor: "pink"
        },
        search: {
          placeholder: "red"
        },
        root: {
          backgroundColor: "salmon",
          color: "darkblue",
          borderColor: "blue"
        },
        selectedOption: {
          backgroundColor: "green",
          ":hover": {
            backgroundColor: "yellow"
          },
        },
        button: {
          placeholder: "yellow",
          root: {
            backgroundColor: "tomato"
          },
          icon: {
            color: "black"
          },
        },
        header: {
          backgroundColor: "gold",
          color: "navy"
        },
        option: {
          color: "yellow",
          ":hover": {
            backgroundColor: "pink",
            color: "blue"
          },
        },
        badge: {
          root: {
            backgroundColor: "blue",
            color: "white",
            ":hover": {
              backgroundColor: "yellow",
              color: "gold"
            },
          },
          icon: {
            color: "purple"
          },
        },
        createNewOption: {
          root: {
            backgroundColor: "blue",
            color: "green"
          },
          icon: {
            color: "white"
          }
        }
      },
    },
    columnMatchValue: {
      root: {
        backgroundColor: "lemonchiffon",
        borderColor: "red",
        color: "blue"
      },
      emptyValue: {
        color: "gold"
      },
      icon: {
        stroke: "red"
      },
      scrollbar: {
        backgroundColor: "purple",
        navigatorColor: "pink",
      },
      dropdown: {
        root: {
          backgroundColor: "salmon",
          color: "darkblue",
          borderColor: "red"
        },
        scrollbar: {
          backgroundColor: "purple",
          navigatorColor: "pink"
        },
        selectedOption: {
          backgroundColor: "navy"
        },
        option: {
          ":hover": {
            backgroundColor: "pink",
            color: "blue"
          },
        },
        button: {
          placeholder: "yellow",
          root: {
            backgroundColor: "tomato"
          },
          icon: {
            color: "chocolate"
          },
        },
        createNewOption: {
          root: {
            backgroundColor: "blue",
            color: "green"
          },
          icon: {
            color: "white"
          }
        },
        multiSelectionBadge: {
          root: {
            backgroundColor: "green",
            color: "blue"
          },
          icon: {
            color: "blue"
          },
        },
        iconCheckedColor: "yellow"
      },
    },
    requiredColumns: {
      title: {
        color: "red"
      },
      showMore: {
        root: {
          backgroundColor: "yellow"
        },
        badge: {
          backgroundColor: "blue",
          color: "yellow"
        },
        text: {
          color: "purple",
          fontSize: 24
        },
        icon: {
          stroke: "blue"
        },
      },
      notMatchErrorIcon: {
        stroke: "green"
      },
      notMatchError: {
        color: "blue"
      },
      hasMatchIcon: {
        stroke: "purple"
      },
      hasMatch: {
        color: "yellow"
      },
      notMatch: {
        color: "purple"
      },
      notMatchIcon: {
        color: "black"
      },
    },
    dialogCreateCustomColumn: {
      root: {
        backgroundColor: "blue"
      },
      overlay: {
        backgroundColor: "blue"
      },
      closeIcon: {
        stroke: "red"
      },
      title: {
        color: "white"
      },
      description: {
        color: "white"
      },
      columnName: {
        label: {
          color: "red"
        },
        icon: {
          color: "green"
        },
        input: {
          backgroundColor: "red",
          borderColor: "green"
        },
        errorMessage: {
          color: "white",
          fontWeight: "bold"
        }
      },
      columnType: {
        label: {
          color: "red"
        },
        icon: {
          color: "green"
        },
        dropdown: {
          button: {
            root: {
              backgroundColor: "red",
              color: "green"
            },
            icon: {
              color: "blue"
            }
          },
          scrollbar: {
            navigatorColor: "red",
            backgroundColor: "blue"
          },
          option: {
            backgroundColor: "red",
            color: "yellow"
          },
          selectedOption: {
            backgroundColor: "green",
            color: "white"
          },
          iconCheckedColor: "white"
        }
      },
      dateFormat: {
        label: {
          color: "red"
        },
        icon: {
          color: "green"
        },
        dropdown: {
          button: {
            root: {
              backgroundColor: "red",
              color: "green"
            },
            icon: {
              color: "blue"
            }
          },
          scrollbar: {
            navigatorColor: "red",
            backgroundColor: "blue"
          },
          option: {
            backgroundColor: "red",
            color: "yellow"
          },
          selectedOption: {
            backgroundColor: "green",
            color: "white"
          },
          iconCheckedColor: "white"
        }
      }
    },
    dialogCreateCustomOption: {
      root: {
        backgroundColor: "blue"
      },
      overlay: {
        backgroundColor: "blue"
      },
      closeIcon: {
        stroke: "red"
      },
      title: {
        color: "white"
      },
      description: {
        color: "white"
      },
      optionName: {
        label: {
          color: "red"
        },
        icon: {
          color: "green"
        },
        input: {
          backgroundColor: "red",
          borderColor: "green"
        },
        errorMessage: {
          color: "white",
          fontWeight: "bold"
        }
      },
      optionType: {
        label: {
          color: "red"
        },
        icon: {
          color: "green"
        },
        dropdown: {
          button: {
            root: {
              backgroundColor: "red",
              color: "green"
            },
            icon: {
              color: "blue"
            }
          },
          scrollbar: {
            navigatorColor: "red",
            backgroundColor: "blue"
          },
          option: {
            backgroundColor: "red",
            color: "yellow"
          },
          selectedOption: {
            backgroundColor: "green",
            color: "white"
          },
          iconCheckedColor: "white"
        }
      }
    },
    columnPopover: {
      backgroundColor: "black",
      color: "coral"
    },
    joinBadge: {
      color: "green"
    },
    sheetInfo: {
      color: "green"
    }
  }
}

reviewEntries

To control the elements within the "Review Entries" step of the nuvo importer, the reviewEntries key can be used. In the following, all available options are listed:

• root - Controls the general styling of the section.
• pageHeader - Controls the base stylings for the header of the page.
• switchError - Controls the color of the "Show all rows with errors" button for the section.
• selectRowColor - Controls the color of the selected row in the table section.
• selectedBackground - Controls the color of the selection frame which is displayed when one field is selected.
• fullscreen - Controls the fullscreen icon on the top right of the section. Important: This icon is only displayed when your screen width is above 1910px.
• infoIcon - Controls the stylings of the info icon right next to the column name within the header row.
• edit - Controls the styles for fields in edit mode with separate options for the dropdown fields boolean and category. These keys have the nested option item which uses the keys option, and selectedOption. For category there're also keys header and search for adjust style of search bar.
• table - Controls the table of the "Review Entries" step. The nested options are table elements, for example, td, th,scrollbar, etc. td also has the additional options for theming normal, error, info and warning fields.
• duplicateButton - Controls the styling of the "Duplicate" button when a row is selected.
• removeButton - Controls the styling of the "Delete" button when a row is selected.
• clearFilterButton - Controls the styling of the "Clear filters" button when a filter is applied to one or more columns.
• selectedBadge - Controls the styling of the badge indicating how many rows are selected.
• addRowButton - Controls the styling of the "+" button to add a new row.
• smartTable- Controls the base styling for the smart table features within the table view if smart table is actived.
• findAndReplaceButton - Controls the styling of the "Find & Replace" button.
• findAndReplaceMenu - Controls the base styling of the "Find & Replace" pop-over.
• toggleViewButton - Controls the styling of the "All rows" "All errors" toggle.
• rowHeader - Controls the styling of selected and not selected row headers.

style: {
  reviewEntries: {
    pageHeader: {
      root: {
        backgroundColor: "#fd79a8"
      },
      title: {
        fontSize: "18px"
      },
      description: {
        fontSize: "14px"
      }
    },
    switchError: {
      label: {
        color: "red",
        fontSize: 20,
      },
      badge: {
        backgroundColor: "orange",
        color: "black",
      },
    },
    selectRowColor: "orange",
    selectedBackground: {
      normal: "yellow",
    },
    fullScreen: {
      root: {
        width: 200,
      },
      icon: {
        stroke: "red",
      },
    },
    infoIcon: {
      color: "orange",
      ":hover": {
        color: "blue",
      },
    },
    edit: {
      category: {
        header: {
          backgroundColor: "blue"
        },
        search: {
          root: {
            backgroundColor: "red"
          },
          icon: {
            color: "green"
          },
          placeholder: {
            color: "blue"
          }
        },
        item: {
          option: {
            backgroundColor: "red",
            ":hover": {
              color: "blue",
            },
          },
          selectedOption: {
            backgroundColor: "blue",
          },
        },
        button: {
          arrowIcon: {
            color: "yellow",
          },
          closeIcon: {
            color: "yellow",
          },
        },
        multiSelectionBadge: {
          root: {
            backgroundColor: "green",
            color: "blue"
          },
          icon: {
            color: "blue"
          },
        },
        iconCheckedColor: "yellow"
      },
      string: {
        backgroundColor: "blue",
      },
      currency: {
        backgroundColor: "pink"
      },
      percentage: {
        backgroundColor: "black"
      },
      date: {
        backgroundColor: "#4F8AAB",
        borderColor: "#4BC589"
      },
      time: {
        backgroundColor: "#9AC54B",
        borderColor: "#C5B64B"
      },
      boolean: {
        item: {
          option: {
            backgroundColor: "red",
          },
          selectedOption: {
            backgroundColor: "blue",
          },
        },
        button: {
          arrowIcon: {
            color: "red",
          },
          closeIcon: {
            color: "red",
          },
        },
      },
    },
    table: {
      scrollbar: {
        backgroundColor: "red",
        navigatorColor: "blue",
      },
      dragStyle: {
        color: "orange",
        style: "solid",
      },
      th: {
        borderColor: "blue",
        backgroundColor: "yellow",
      },
      td: {
        root: {
          borderColor: "grey",
        },
        warning: {
          backgroundColor: "yellow",
          color: "black",
        },
        error: {
          backgroundColor: "red",
          color: "white",
        },
        info: {
          backgroundColor: "blue",
          color: "red",
        },
        normal: {
          backgroundColor: "green",
          color: "red",
        },
      },
    },
    duplicateButton: {
      color: "#f8d7da",
      backgroundColor: "#ff9e80"
    },
    removeButton: {
      color: "#f8d7da",
      backgroundColor: "#ff9e80"
    },
    clearFilterButton: {
      color: "#f8d7da"
    },
    selectedBadge: {
      color: "#f8d7da"
    },
    addRowButton: {
      color: "black"
    },
    smartTable: {
      th: {
        menuIcon: {
          color: "red"
        },
        expandIcon: {
          color: "green",
          backgroundColor: "red"
        },
        loadingIcon: {
          color: "blue"
        }
      },
      "contextMenu": {
        root: {
          backgroundColor: "violet"
        },
        item: {
          label: {
            color: "white"
          },
          icon: {
            color: "yellow"
          },
          root: {
            backgroundColor: "red",
            :hover: {
              backgroundColor: "blue"
            }
          },
          popover: {
            backgroundColor: "red"
          }
        },
        filter: {
          label: {
            color: "yellowgreen",
            textDecoration: "underline"
          },
          input: {
            root: {
              color: "blanchedalmond",
              fontSize: 24,
              borderColor: "red"
            },
            icon: {
              color: "yellow"
            }
          },
          radioButton: {
            root: {
              backgroundColor: "green",
              color: "orange"
            },
            radio: {
              color: "orange"
            }
          },
          outlineButton: {
            color: "honeydew",
            fontSize: "20px"
          },
          dropdown: {
            root: {
              backgroundColor: "red",
              color: "blue"
            },
            icon: {
              color: "white"
            },
            list: {
              root: {
                backgroundColor: "yellow"
              },
              item: {
                backgroundColor: "navy"
              }
            }
          },
          root: {
            backgroundColor: "whitesmoke"
          },
          valueList: {
            root: {
              backgroundColor: "green",
              color: "white"
            },
            item: {
              color: "white"
            },
            checkbox: {
              backgroundColor: "red",
              color: "#00ff00",
              :checked: {
                backgroundColor: "blue"
              }
            },
            emptyIcon: {
              color: "yellow"
            }
          },
          secondButton: {
            backgroundColor: "red",
            color: "white"
          },
          primaryButton: {
            backgroundColor: "red",
            color: "black"
          }
        }
      },
      findAndReplaceButton: {
        backgroundColor: "pink",
        color: "white"
      },
      findAndReplaceMenu: {
        closeIcon: {
          color: "blue"
        },
        root: {
          boxShadow: "5px 5px 0px black"
        },
        title: {
          color: "red"
        },
        label: {
          color: "pink"
        },
        checkboxLabel: {
          color: "pink"
        },
        checkbox: {
          backgroundColor: "green",
          color: "violet",
          :checked: {
            backgroundColor: "red"
          }
        },
        infoText: {
          fontStyle: "italic"
        },
        input: {
          color: "red"
        },
        primaryButton: {
          backgroundColor: "pink"
        },
        dropdown: {
          root: {
            color: "white"
          },
          icon: {
            color: "green"
          },
          list: {
            root: {
              boxShadow: "3px 3px 0px black"
            },
            checkbox: {
              backgroundColor: "green",
              :checked: {
                backgroundColor: "red"
              }
            },
            item: {
              color: "red",
              backgroundColor: "blue"
            },
            selectedItem: {
              backgroundColor: "pink"
            }
          }
        }
      },
      freezeBoxShadow: "5px 5px blue, 10px 10px red, 15px 15px green"
    },
    toggleViewButton: {
      root: {
        border: "10px solid red"
      },
      item: {
        backgroundColor: "green"
      },
      selected: {
        backgroundColor: "purple"
      },
      allRows: {
        color: "red"
      },
      errorRows: {
        color: "blue"
      }
    },
    rowHeader: {
      checkbox: {
        backgroundColor: "red",
        :checked: {
          backgroundColor: "blue"
        }
      },
      allCheckbox: {
        backgroundColor: "red",
        :checked: {
          backgroundColor: "blue"
        },
        :indeterminate: {
          backgroundColor: "violet"
        }
      }
    }
  }
}

popover

The popover key allows the styling of the error, warning and info popover indicator, that occur when hovering over a cell containing an error, warning or info.

All three classes (info, warning and error) contain the following key:

• root - Controls the basic styling for the popover indicator

style: {
  popover: {
    info: {
      root: {
        color: "white",
        backgroundColor: "#11b981",
        borderColor: "#11b981"
      }
    },
    warning: {
      root: {
        color: "white",
        backgroundColor: "orange",
        borderColor: "orange"
      }
    },
    error: {
      root: {
        color: "white",
        backgroundColor: "#9b0707",
        borderColor: "#9b0707"
      }
    }
  }
}

dialog

The dialog key allows controlling the style of the pop-up screens, which occurs when modal is set to true:

• root - Controls the base stylings for the section.
• overlay - Controls the stylings of the overlay that surrounds the dialog container.
• closeIcon - Controls the style of the "X" icon on the top right of the pop-ups.

style: {
  dialog: {
    root: {
      backgroundColor: "yellow",
    },
    overlay: {
      backgroundColor: "white",
    },
    closeIcon: {
      stroke: "red",
    },
    scrollbar: {
      backgroundColor: "purple",
      navigatorColor: "pink",
    },
  }
}

messagePopup

The messagePopup key allows controlling the style of the pop-ups which occur when going backward or for confirmations during the import process. In the following, all available options are listed:

• root - Controls the base stylings for the section.
• overlay - Controls the stylings of the overlay that surrounds the dialog container.
• title - Controls the style of the pop-up title.
• description - Controls the style of the pop-up description text.
• warnIcon - Controls the style of the pop-up warning icon.
• closeIcon - Controls the style of the "X" icon on the top right of the pop-ups.

style: {
  messagePopup: {
    root: {
      backgroundColor: "green",
    },
    overlay: {
      backgroundColor: "blue",
    },
    title: {
      color: "red",
    },
    description: {
      color: "blue",
    },
    warnIcon: {
      stroke: "red",
    },
    closeIcon: {
      stroke: "blue",
    },
  }
}

popoverInfo

The popoverInfo allows for the styling of the popover indicator, mainly inside the section containing additional information to lookup.

This option has only a root key assigned with CSS directly to this option.

style: {
  popoverInfo: {
    backgroundColor: "white",
    color: "red",
  }
}

loader

When a file is uploaded, a loading indicator will appear. This key controls the stylings of that indicator and its container.

• root - Controls the base stylings for the section.
• content - Controls the styling of content in the loading section.
• loadAnimationColor - Controls the color of the animation inside the spin icon.

style: {
  loader: {
    root: {
      backgroundColor: "#f2f2f2",
    },
    content: {
      color: "green",
    },
    loadAnimationColor: "green",
  }
}

cleaningAssistant

The cleaningAssistant key allows you to customize the appearance of UI elements related to the Cleaning Assistant feature, including the toggle button, cleaning suggestion list, and the column-specific cleaning dropdown. Below is a breakdown of the available style options:

• root – Controls the outer container of the Cleaning Assistant UI component.
• toggle – Styles the toggle button used to open the Cleaning Assistant.
  • root – Controls the base styling of the toggle button (e.g. size, background, borders).
  • sparkleA – Controls the styling of the first decorative sparkle animation inside the button.
  • sparkleB – Controls the styling of the second decorative sparkle animation.
  • icon – Styles the icon shown within the toggle button (e.g. a magic wand or broom).
  • badge – Styles the red badge that displays the number of active cleanings.
• suggestionList – Controls the layout and styling of the grouped suggestion view.
  • root – Wraps all column cleaning suggestions.
  • header – Styles the column headers in the grouped view (e.g. “Company ID”).
  • headerCheckbox – Controls the checkbox that allows selecting/deselecting all suggestions in a group.
  • headerCheckboxLabel – Styles the label shown next to the group checkbox.
• suggestion – Styles each individual cleaning suggestion row.
  • root – Base styling for each suggestion row.
  • newValue – Styles the suggested value (e.g. bolded replacement).
  • oldValue – Styles the original value to be replaced.
  • oldValueEmpty – Styles the layout when the original value is missing or empty.
  • checkbox – Styles the checkbox to select or deselect a single suggestion.
  • details – Controls additional elements (e.g. info icons or tooltips).
  • actions – Container for suggestion action buttons.
  • findButton – Styles the “Find” or magnifying glass button.
  • dismissButton – Styles the “Dismiss” button.
  • applyButton – Styles the “Apply” button.
• loadingState – Controls the styling while the assistant is fetching suggestions.
  • root – Wraps the full loading state UI.
  • skeleton – Styles the animated skeleton placeholders shown during loading.
• emptyState – Styles the view when there are no available suggestions.
  • root – Wraps the empty state message.
  • icon – Styles the icon used in the empty state.
  • title – Styles the empty state title text.
  • text – Styles supporting text shown in the empty state.
• dropdown – Controls the styling of the dropdown shown when a user selects a specific column.
  • root – Wraps the entire dropdown view.
  • header – Controls the top section of the dropdown.
  • headerBack – Styles the back button used to return to the grouped view.
  • headerText – Styles the column title in the header.
  • headerTag – Styles the tag showing the number of cleanings (e.g. "10 cleanings").
  • headerActions – Wraps action buttons in the header.
  • headerActionRepeat – Styles the repeat (refresh) button.
  • headerActionRepeatSpinner – Wraps the spinner for repeat loading.
  • headerActionRepeatSpinnerInner – Styles the spinner animation itself.
  • headerActionClose – Styles the “X” close button in the top right corner.
  • body – Controls the main content area of the dropdown.
  • footer – Controls the entire footer area.
  • footerSelected – Styles the text showing how many items are selected (e.g. "0 selected").
  • footerActions – Wraps the footer action buttons.
  • footerDismiss – Styles the “Dismiss” button.
  • footerApply – Styles the “Apply” button.
• cleaningGroupList – Controls the list that contains multiple grouped cleaning suggestions.
  • root – Styles the full list of grouped columns.
• cleaningGroup – Styles each group in the suggestion list.
  • root – Controls the base layout of each column group.
  • name – Styles the column name text.
  • divider – Controls the divider line between different groups.
  • count – Styles the count label showing how many cleanings are shown.
  • icon – Styles the column group icon.

style: {
  cleaningAssistant: {
    root: {},
    toggle: {
      root: {},
      sparkleA: {},
      sparkleB: {},
      icon: {},
      badge: {}
    },
    suggestionList: {
      root: {},
      header: {},
      headerCheckbox: {},
      headerCheckboxLabel: {}
    },
    suggestion: {
      root: {},
      newValue: {},
      oldValue: {},
      oldValueEmpty: {},
      checkbox: {},
      details: {},
      actions: {},
      findButton: {},
      dismissButton: {},
      applyButton: {}
    },
    loadingState: {
      root: {},
      skeleton: {}
    },
    emptyState: {
      root: {},
      icon: {},
      title: {},
      text: {}
    },
    dropdown: {
      root: {},
      header: {},
      headerBack: {},
      headerText: {},
      headerTag: {},
      headerActions: {},
      headerActionRepeat: {},
      headerActionRepeatSpinner: {},
      headerActionRepeatSpinnerInner: {},
      headerActionClose: {},
      body: {},
      footer: {},
      footerSelected: {},
      footerActions: {},
      footerDismiss: {},
      footerApply: {}
    },
    cleaningGroupList: {
      root: {}
    },
    cleaningGroup: {
      root: {},
      name: {},
      divider: {},
      count: {},
      icon: {}
    }
  }
}

contextualEngine

The contextualEngine key allows you to customize the appearance of UI elements related to the Contextual Engine feature, including the loading animation and the "Use Contextual Engine" modal shown when the engine is set to "prompt". Below is a breakdown of the available style options:

• loading - Controls the styling of the loading animation shown while the Contextual Engine is processing the file.
  • root – Controls the base styling of the full-screen loading overlay (e.g. background color, positioning).
  • icon – Controls the icon used in the loading animation. You can:
    • Replace the icon via backgroundImage.
    • Hide the icon entirely by setting display: "none".
• prompt - Controls the styling of the modal that appears when contextualEngine is set to "prompt" and asks the user whether to use the Contextual Engine.
  • root – Controls the base styling of the modal background.
  • icon – Controls the icon shown inside the modal. You can:
    • Replace the icon via backgroundImage.
    • Hide the icon entirely by setting display: "none".
  • cancelButton – Styles the “Cancel” button in the modal (e.g. color, backgroundColor).
  • confirmButton – Styles the “Confirm” button in the modal (e.g. color, backgroundColor).

style: {
  contextualEngine: {
    loading: {
      root: {
        backgroundColor: "red",
      },
      icon: {
        backgroundImage: "url('dummy_url')", // use to replace the icon of the loading animation
        display: "flex" // set to "none" to remove the icon of the loading animation
      }
    },
    prompt: {
      root: {
        backgroundColor: "red",
      },
      icon: {
        backgroundImage: "url('dummy_url')", // use to replace the icon of the "Use Contextual Engine" modal
        display: "flex" // set to "none" to remove the icon of the "Use Contextual Engine" modal
      },
      cancelButton: {
        color: "green",
        backgroundColor: "black"
      },
      confirmButton: {
        color: "yellow",
        backgroundColor: "white"
      }
    }
  }
}

info

If you set modal === false and want the loading animation to cover the entire screen, you can apply the following styling:

style: {
  contextualEngine: {
    loading: {
      root: {
        position: "absolute",
        zIndex: "30", // increase if other elements in your app overlap it
      },
    },
  },
},

Complete styling

Here you can find a complete code snippet with all the main keys mentioned above:

  style: {
    globals: {
      textColor: "#162338",
      fontFamily: "arial",
      backgroundColor: "#f1f1f1",
      primaryTextColor: "#111111",
      secondaryTextColor: "#143a52",
    },
    root: {
      container: {
        padding: 0,
      },
    },
    buttons: {
      primary: {
        backgroundColor: "#143a52",
        borderColor: "#143a52",
        color: "#ffffff",
        padding: "4px 11px",
        fontSize: "16px",
        borderRadius: "10px",
        ":hover": {
          backgroundColor: "#24516D",
          borderColor: "#ffffff",
        },
        ":active": {
          backgroundColor: "##0C3046",
          borderColor: "#ffffff",
        },
      },
      secondary: {
        backgroundColor: "#ffffff",
        borderColor: "#143a52",
        color: "#143a52",
        padding: "4px 11px",
        fontSize: "16px",
        borderRadius: "10px",
        ":hover": {
          backgroundColor: "#ffffff",
          borderColor: "#24516D",
          color: "#24516D",
        },
        ":active": {
          backgroundColor: "#FFFFFF",
          borderColor: "#0C3046",
          color: "#0C3046",
        },
      },
    },
    progressBar: {
      root: {
        backgroundColor: "grey",
        borderRadius: "7px",
        border: "1px solid white",
        padding: "20px",
      },
      icon: {
        fill: "red",
      },
      current: {
        color: "darkblue",
        fontSize: "18px",
        fontWeight: "600",
      },
      complete: {
        color: "green",
      },
      incomplete: {
        color: "yellow",
      },
    },
    header: {
      root: {
        backgroundColor: "#E1E1E1",
      },
      title: {
        color: "darkblue",
        fontSize: "10px",
      },
      description: {
        color: "black",
        fontSize: "8px",
      },
    },
    dropzone: {
      root: {
        backgroundColor: "#E1E1E1",
        border: "1px solid black",
      },
      icon: {
        box: {
          fill: "black",
        },
      },
      content: {
        root: {
          backgroundColor: "#E1E1E1",
          border: "1px solid black",
          borderRadius: "20px",
          padding: "40px 60px",
        },
        title: {
          color: "darkblue",
        },
        description: {
          color: "green",
        },
        illustration: {
          borderColor: "red",
          headerColor: "green",
          circleHeaderColor: "blue",
          circleRowColor: "brown",
          downloadIconColor: "gray",
          shadowColor: "#E0EAFD",
        },
      },
      container: {
        padding: 0,
      },
    },
    footer: {
      root: {
        backgroundColor: "#E1E1E1",
      },
    },
    sheetSelect: {
      root: {
        backgroundColor: "#E1E1E1",
        border: "1px solid black",
      },
      pageHeader: {
        root: {
          backgroundColor: "#fd79a8",
        },
        title: {
          fontSize: "18px",
        },
        description: {
          fontSize: "14px",
        },
      },
      header: {
        color: "red",
      },
      sheetName: {
        root: {
          backgroundColor: "yellow",
        },
        title: {
          color: "green",
        },
        description: {
          color: "orange",
        },
        border: {
          backgroundColor: "#143a52",
        },
      },
      grid: {
        root: {
          backgroundColor: "yellow",
        },
        title: {
          color: "green",
        },
        description: {
          color: "orange",
        },
        checkbox: {
          backgroundColor: "red",
        },
        illustration: {
          borderColor: "red",
          cellColor: "red",
          headerColor: "red",
          outlineColor: "red",
        },
        checked: {
          root: {
            borderColor: "red",
            backgroundColor: "blue",
          },
          title: {
            color: "green",
          },
          description: {
            color: "yellow",
          },
          checkbox: {
            backgroundColor: "red",
          },
          illustration: {
            borderColor: "red",
            cellColor: "red",
            headerColor: "red",
            outlineColor: "red",
          },
        },
        container: {
          backgroundColor: "white",
        },
      },
      list: {
        root: {
          backgroundColor: "yellow",
        },
        title: {
          color: "green",
        },
        description: {
          color: "orange",
        },
        checkbox: {
          backgroundColor: "red",
        },
        checked: {
          root: {
            borderColor: "red",
            backgroundColor: "blue",
          },
          title: {
            color: "green",
          },
          description: {
            color: "yellow",
          },
          checkbox: {
            backgroundColor: "red",
          },
        },
        container: {
          backgroundColor: "white",
        },
      },
      pagination: {
        currentPageButton: {
          backgroundColor: "red",
          color: "white",
        },
      },
      icon: {
        stroke: "red",
      },
      sheetLists: {
        root: {
          backgroundColor: "brown",
        },
      },
      scrollbar: {
        backgroundColor: "blue",
        navigatorColor: "red",
      },
      unSelectSheetName: {
        root: {
          backgroundColor: "green",
        },
        title: {
          color: "pink",
        },
        description: {
          color: "purple",
        },
        border: {
          backgroundColor: "green",
        },
      },
      addFileButton: {
        root: {
          backgroundColor: "red",
          color: "blue",
        },
        icon: {
          stroke: "green",
        },
      },
      sheetPreview: {
        title: {
          color: "#eb3b5a",
        },
        fileName: {
          color: "#fa8231",
        },
        sheetName: {
          color: "#20bf6b",
        },
        listButton: {
          color: "#fc5c65",
        },
        gridButton: {
          background: "#fc5c65",
        },
        table: {
          root: {
            background: "#a55eea",
          },
          th: {
            color: "#26de81",
          },
          td: {
            color: "#4b7bec",
          },
        },
      },
    },
    headerSelect: {
      root: {
        borderRadius: "20px",
      },
      pageHeader: {
        root: {
          backgroundColor: "#fd79a8",
        },
        title: {
          fontSize: "18px",
        },
        description: {
          fontSize: "14px",
        },
      },
      content: {
        fontSize: "12px",
        color: "red",
      },
      sheetName: {
        root: {
          backgroundColor: "grey",
          borderRadius: "5px",
          padding: "8px",
        },
        title: {
          color: "orange",
        },
        description: {
          color: "yellow",
        },
        border: {
          backgroundColor: "#143a52",
        },
      },
      fullScreen: {
        root: {
          width: 200,
        },
        icon: {
          stroke: "red",
        },
      },
      table: {
        th: {
          backgroundColor: "#E1E1E1",
          borderColor: "black",
          color: "yellow",
        },
        td: {
          backgroundColor: "#f2f2f2",
          borderColor: "black",
        },
        scrollbar: {
          navigatorColor: "#4b357f",
          backgroundColor: "#e9e6ef",
        },
        selectRowColor: "yellow",
      },
      progressBar: {
        root: {
          backgroundColor: "red",
        },
        progress: {
          navigatorColor: "blue",
          backgroundColor: "green",
        },
      },
      sheetNameSelected: {
        root: {
          backgroundColor: "grey",
          borderRadius: "5px",
        },
        title: {
          color: "orange",
        },
        description: {
          color: "yellow",
        },
        border: {
          backgroundColor: "#143a52",
        },
      },
    },
    joinSheet: {
      root: {
        backgroundColor: "green",
        borderRadius: "20px",
      },
      pageHeader: {
        root: {
          backgroundColor: "#fd79a8",
        },
        title: {
          fontSize: "18px",
        },
        description: {
          fontSize: "14px",
        },
      },
      content: {
        backgroundColor: "white",
      },
      table: {
        empty: {
          description: {
            color: "red",
          },
          title: {
            color: "blue",
          },
          root: {
            backgroundColor: "green",
          },
          content: {
            backgroundColor: "black",
          },
        },
        root: {
          backgroundColor: "black",
        },
        badge: {
          backgroundColor: "green",
          color: "red",
        },
        scrollbar: {
          backgroundColor: "red",
          navigatorColor: "green",
        },
        td: {
          backgroundColor: "red",
        },
        th: {
          backgroundColor: "yellow",
        },
      },
      sheetPreview: {
        fileName: {
          color: "red",
        },
        sheetName: {
          color: "blue",
        },
        title: {
          color: "green",
        },
        table: {
          root: {
            backgroundColor: "red",
          },
          scrollbarBackgroundColor: "red",
          scrollbarNavigatorColor: "green",
          td: {
            backgroundColor: "red",
          },
          th: {
            backgroundColor: "yellow",
          },
        },
      },
      sheetSelection: {
        root: {
          backgroundColor: "rgba(0, 0, 255, 0.7)",
        },
        title: {
          color: "red",
        },
        badge: {
          backgroundColor: "red",
          color: "white",
        },
        empty: {
          backgroundColor: "red",
        },
        joinedSheets: {
          root: {
            backgroundColor: "gold",
          },
        },
        scrollbar: {
          backgroundColor: "red",
          navigatorColor: "green",
        },
        sheet: {
          title: {
            color: "red",
          },
          description: {
            color: "blue",
          },
          root: {
            backgroundColor: "greenyellow",
          },
          addButton: {
            backgroundColor: "red",
            color: "blue",
            ":hover": {
              backgroundColor: "blue",
              color: "white",
            },
          },
          addMenu: {
            root: {
              backgroundColor: "blue",
            },
            item: {
              backgroundColor: "red",
              color: "purple",
              ":hover": {
                backgroundColor: "green",
              },
              ":disabled": {
                color: "yellow",
              },
            },
          },
          removeButton: {
            backgroundColor: "blue",
            color: "red",
          },
          previewButton: {
            color: "blue",
            backgroundColor: "white",
          },
        },
        unselectedSheets: {
          root: {
            backgroundColor: "green",
          },
        },
      },
      appendColumnsDialog: {
        root: {
          backgroundColor: "violet",
        },
        overlay: {
          backgroundColor: "blue",
        },
        closeIcon: {
          stroke: "yellow",
        },
        title: {
          color: "red",
        },
        description: {
          color: "blue",
        },
        label: {
          color: "blue",
        },
        asterisk: {
          color: "white",
        },
        dropdown: {
          scrollbar: {
            navigatorColor: "purple",
            backgroundColor: "yellow",
          },
          search: {
            root: {
              borderColor: "blue",
              backgroundColor: "black",
              color: "blue",
            },
            icon: {
              color: "red",
            },
            placeholder: {
              color: "green",
            },
          },
          root: {
            backgroundColor: "greenyellow",
          },
          selectedOption: {
            backgroundColor: "black",
          },
          button: {
            root: {
              backgroundColor: "yellow",
              color: "green",
              borderColor: "red",
            },
            icon: {
              color: "red",
            },
            placeholder: {
              color: "red",
            },
          },
          header: {
            backgroundColor: "red",
            color: "white",
          },
          option: {
            backgroundColor: "blue",
            color: "white",
          },
          badge: {
            backgroundColor: "blueviolet",
            color: "white",
          },
          joinBadge: {
            backgroundColor: "orangered",
            color: "white",
          },
        },
        appendColumn: {
          backgroundColor: "red",
          borderColor: "green",
        },
      },
      joinColumnsDialog: {
        root: {
          backgroundColor: "pink",
        },
        overlay: {
          backgroundColor: "red",
        },
        scrollbar: {
          navigatorColor: "blue",
          backgroundColor: "black",
        },
        closeIcon: {
          stroke: "red",
        },
        title: {
          color: "white",
        },
        description: {
          color: "red",
        },
        dropdown: {
          scrollbar: {
            navigatorColor: "purple",
            backgroundColor: "yellow",
          },
          search: {
            root: {
              borderColor: "blue",
              backgroundColor: "black",
              color: "blue",
            },
            icon: {
              color: "red",
            },
            placeholder: {
              color: "green",
            },
          },
          root: {
            backgroundColor: "greenyellow",
          },
          selectedOption: {
            backgroundColor: "black",
          },
          button: {
            root: {
              backgroundColor: "yellow",
              color: "green",
              borderColor: "red",
            },
            icon: {
              color: "red",
            },
            placeholder: {
              color: "red",
            },
          },
          header: {
            backgroundColor: "red",
            color: "white",
          },
          option: {
            backgroundColor: "blue",
            color: "white",
          },
        },
        badge: {
          backgroundColor: "blueviolet",
          color: "white",
        },
        joinBadge: {
          backgroundColor: "orangered",
          color: "white",
        },
      },
      deleteButton: {
        backgroundColor: "blue",
        color: "yellow",
      },
      label: {
        color: "red",
      },
      asterisk: {
        color: "blue",
      },
      matchStatus: {
        success: {
          percent: {
            color: "red",
          },
          icon: {
            color: "yellow",
          },
          root: {
            backgroundColor: "blue",
          },
          description: {
            color: "white",
          },
        },
        warning: {
          percent: {
            color: "green",
          },
          icon: {
            color: "blue",
          },
          root: {
            backgroundColor: "black",
          },
          description: {
            color: "red",
          },
        },
      },
    },
    removedSheet: {
      root: {
        backgroundColor: "red",
      },
      sheetName: {
        backgroundColor: "blue",
      },
      column: {
        color: "white",
      },
    },
    columnMatch: {
      root: {
        color: "blueviolet",
        borderColor: "red",
      },
      pageHeader: {
        root: {
          backgroundColor: "#fd79a8",
        },
        title: {
          fontSize: "18px",
        },
        description: {
          fontSize: "14px",
        },
      },
      icon: {
        color: "black",
      },
      matchingTitle: {
        root: {
          backgroundColor: "tomato",
        },
        icon: {
          color: "green",
        },
        checkIcon: {
          color: "chocolate",
        },
      },
      matchingPercent: {
        root: {
          backgroundColor: "green",
          color: "yellow",
        },
        icon: {
          color: "pink",
        },
      },
      notMatchingValue: {
        root: {
          backgroundColor: "green",
          color: "red",
        },
        icon: {
          color: "red",
        },
      },
      columnMatchHeader: {
        root: {
          backgroundColor: "burlywood",
          borderColor: "tomato",
          color: "burlywood",
        },
        icon: {
          stroke: "yellow",
        },
        dropdown: {
          scrollbar: {
            backgroundColor: "purple",
            navigatorColor: "pink",
          },
          search: {
            placeholder: "red",
          },
          root: {
            backgroundColor: "salmon",
            color: "darkblue",
            borderColor: "blue",
          },
          selectedOption: {
            backgroundColor: "green",
            ":hover": {
              backgroundColor: "yellow",
            },
          },
          button: {
            placeholder: "yellow",
            root: {
              backgroundColor: "tomato",
            },
            icon: {
              color: "black",
            },
          },
          header: {
            backgroundColor: "gold",
            color: "navy",
          },
          option: {
            color: "yellow",
            ":hover": {
              backgroundColor: "pink",
              color: "blue",
            },
          },
          badge: {
            root: {
              backgroundColor: "blue",
              color: "white",
              ":hover": {
                backgroundColor: "yellow",
                color: "gold",
              },
            },
            icon: {
              color: "purple",
            },
          },
          createNewOption: {
            root: {
              backgroundColor: "blue",
              color: "green",
            },
            icon: {
              color: "white",
            },
          },
        },
      },
      columnMatchValue: {
        root: {
          backgroundColor: "lemonchiffon",
          borderColor: "red",
          color: "blue",
        },
        emptyValue: {
          color: "gold",
        },
        icon: {
          stroke: "red",
        },
        scrollbar: {
          backgroundColor: "purple",
          navigatorColor: "pink",
        },
        dropdown: {
          root: {
            backgroundColor: "salmon",
            color: "darkblue",
            borderColor: "red",
          },
          scrollbar: {
            backgroundColor: "purple",
            navigatorColor: "pink",
          },
          selectedOption: {
            backgroundColor: "navy",
          },
          option: {
            ":hover": {
              backgroundColor: "pink",
              color: "blue",
            },
          },
          button: {
            placeholder: "yellow",
            root: {
              backgroundColor: "tomato",
            },
            icon: {
              color: "chocolate",
            },
          },
          createNewOption: {
            root: {
              backgroundColor: "blue",
              color: "green",
            },
            icon: {
              color: "white",
            },
          },
          iconCheckedColor: "yellow",
        },
      },
      requiredColumns: {
        title: {
          color: "red",
        },
        showMore: {
          root: {
            backgroundColor: "yellow",
          },
          badge: {
            backgroundColor: "blue",
            color: "yellow",
          },
          text: {
            color: "purple",
            fontSize: 24,
          },
          icon: {
            stroke: "blue",
          },
        },
        notMatchErrorIcon: {
          stroke: "green",
        },
        notMatchError: {
          color: "blue",
        },
        hasMatchIcon: {
          stroke: "purple",
        },
        hasMatch: {
          color: "yellow",
        },
        notMatch: {
          color: "purple",
        },
        notMatchIcon: {
          color: "black",
        },
      },
      columnPopover: {
        backgroundColor: "black",
        color: "coral",
      },
      joinBadge: {
        color: "green",
      },
      sheetInfo: {
        color: "green",
      },
    },
    reviewEntries: {
      pageHeader: {
        root: {
          backgroundColor: "#fd79a8",
        },
        title: {
          fontSize: "18px",
        },
        description: {
          fontSize: "14px",
        },
      },
      switchError: {
        label: {
          color: "red",
          fontSize: 20,
        },
        badge: {
          backgroundColor: "orange",
          color: "black",
        },
      },
      selectRowColor: "orange",
      selectedBackground: {
        normal: "yellow",
      },
      fullScreen: {
        root: {
          width: 200,
        },
        icon: {
          stroke: "red",
        },
      },
      infoIcon: {
        color: "orange",
        ":hover": {
          color: "blue",
        },
      },
      edit: {
        category: {
          header: {
            backgroundColor: "blue",
          },
          search: {
            root: {
              backgroundColor: "red",
            },
            icon: {
              color: "green",
            },
            placeholder: {
              color: "blue",
            },
          },
          item: {
            option: {
              backgroundColor: "red",
              ":hover": {
                color: "blue",
              },
            },
            selectedOption: {
              backgroundColor: "blue",
            },
          },
          button: {
            arrowIcon: {
              color: "yellow",
            },
            closeIcon: {
              color: "yellow",
            },
          },
          iconCheckedColor: "yellow",
        },
        string: {
          backgroundColor: "blue",
        },
        currency: {
          backgroundColor: "pink",
        },
        percentage: {
          backgroundColor: "black",
        },
        date: {
          backgroundColor: "#4F8AAB",
          borderColor: "#4BC589",
        },
        time: {
          backgroundColor: "#9AC54B",
          borderColor: "#C5B64B",
        },
        boolean: {
          item: {
            option: {
              backgroundColor: "red",
            },
            selectedOption: {
              backgroundColor: "blue",
            },
          },
          button: {
            arrowIcon: {
              color: "red",
            },
            closeIcon: {
              color: "red",
            },
          },
        },
      },
      table: {
        scrollbar: {
          backgroundColor: "red",
          navigatorColor: "blue",
        },
        dragStyle: {
          color: "orange",
          style: "solid",
        },
        th: {
          borderColor: "blue",
          backgroundColor: "yellow",
        },
        td: {
          root: {
            borderColor: "grey",
          },
          warning: {
            backgroundColor: "yellow",
            color: "black",
          },
          error: {
            backgroundColor: "red",
            color: "white",
          },
          info: {
            backgroundColor: "blue",
            color: "red",
          },
          normal: {
            backgroundColor: "green",
            color: "red",
          },
        },
        duplicateButton: {
          color: "#f8d7da",
          backgroundColor: "#ff9e80",
        },
        removeButton: {
          color: "#f8d7da",
          backgroundColor: "#ff9e80",
        },
        clearFilterButton: {
          color: "#f8d7da",
        },
        selectedBadge: {
          color: "#f8d7da",
        },
        addRowButton: {
          color: "black",
        },
        smartTable: {
          th: {
            menuIcon: {
              color: "red",
            },
            expandIcon: {
              color: "green",
              backgroundColor: "red",
            },
            loadingIcon: {
              color: "blue",
            },
          },
          contextMenu: {
            root: {
              backgroundColor: "violet",
            },
            item: {
              label: {
                color: "white",
              },
              icon: {
                color: "yellow",
              },
              root: {
                backgroundColor: "red",
                ":hover": {
                  backgroundColor: "blue",
                },
              },
              popover: {
                backgroundColor: "red",
              },
            },
            filter: {
              label: {
                color: "yellowgreen",
                textDecoration: "underline",
              },
              input: {
                root: {
                  color: "blanchedalmond",
                  fontSize: 24,
                  borderColor: "red",
                },
                icon: {
                  color: "yellow",
                },
              },
              radioButton: {
                root: {
                  backgroundColor: "green",
                  color: "orange",
                },
                radio: {
                  color: "orange",
                },
              },
              outlineButton: {
                color: "honeydew",
                fontSize: "20px",
              },
              dropdown: {
                root: {
                  backgroundColor: "red",
                  color: "blue",
                },
                icon: {
                  color: "white",
                },
                list: {
                  root: {
                    backgroundColor: "yellow",
                  },
                  item: {
                    backgroundColor: "navy",
                  },
                },
              },
              root: {
                backgroundColor: "whitesmoke",
              },
              valueList: {
                root: {
                  backgroundColor: "green",
                  color: "white",
                },
                item: {
                  color: "white",
                },
                checkbox: {
                  backgroundColor: "red",
                  color: "#00ff00",
                  ":checked": {
                    backgroundColor: "blue",
                  },
                },
                emptyIcon: {
                  color: "yellow",
                },
              },
              secondButton: {
                backgroundColor: "red",
                color: "white",
              },
              primaryButton: {
                backgroundColor: "red",
                color: "black",
              },
            },
          },
          findAndReplaceButton: {
            backgroundColor: "pink",
            color: "white",
          },
          findAndReplaceMenu: {
            closeIcon: {
              color: "blue",
            },
            root: {
              boxShadow: "5px 5px 0px black",
            },
            title: {
              color: "red",
            },
            label: {
              color: "pink",
            },
            checkboxLabel: {
              color: "pink",
            },
            checkbox: {
              backgroundColor: "green",
              color: "violet",
              ":checked": {
                backgroundColor: "red",
              },
            },
            infoText: {
              fontStyle: "italic",
            },
            input: {
              color: "red",
            },
            primaryButton: {
              backgroundColor: "pink",
            },
            dropdown: {
              root: {
                color: "white",
              },
              icon: {
                color: "green",
              },
              list: {
                root: {
                  boxShadow: "3px 3px 0px black",
                },
                checkbox: {
                  backgroundColor: "green",
                  ":checked": {
                    backgroundColor: "red",
                  },
                },
                item: {
                  color: "red",
                  backgroundColor: "blue",
                },
                selectedItem: {
                  backgroundColor: "pink",
                },
              },
            },
          },
          freezeBoxShadow: "5px 5px blue, 10px 10px red, 15px 15px green",
        },
        toggleViewButton: {
          root: {
            border: "10px solid red",
          },
          item: {
            backgroundColor: "green",
          },
          selected: {
            backgroundColor: "purple",
          },
          allRows: {
            color: "red",
          },
          errorRows: {
            color: "blue",
          },
        },
        rowHeader: {
          checkbox: {
            backgroundColor: "red",
            ":checked": {
              backgroundColor: "blue",
            },
          },
          allCheckbox: {
            backgroundColor: "red",
            ":checked": {
              backgroundColor: "blue",
            },
            ":indeterminate": {
              backgroundColor: "violet",
            },
          },
        },
      },
    },
    popover: {
      info: {
        root: {
          color: "white",
          backgroundColor: "#11b981",
          borderColor: "#11b981",
        },
      },
      warning: {
        root: {
          color: "white",
          backgroundColor: "orange",
          borderColor: "orange",
        },
      },
      error: {
        root: {
          color: "white",
          backgroundColor: "#9b0707",
          borderColor: "#9b0707",
        },
      },
    },
    dialog: {
      root: {
        backgroundColor: "yellow",
      },
      overlay: {
        backgroundColor: "white",
      },
      closeIcon: {
        stroke: "red",
      },
      scrollbar: {
        backgroundColor: "purple",
        navigatorColor: "pink",
      },
    },
    messagePopup: {
      root: {
        backgroundColor: "green",
      },
      overlay: {
        backgroundColor: "blue",
      },
      title: {
        color: "red",
      },
      description: {
        color: "blue",
      },
      warnIcon: {
        stroke: "red",
      },
      closeIcon: {
        stroke: "blue",
      },
    },
    popoverInfo: {
      backgroundColor: "white",
      color: "red",
    },
    loader: {
      root: {
        backgroundColor: "#f2f2f2",
      },
      content: {
        color: "green",
      },
      loadAnimationColor: "green",
    },
    cleaningAssistant: {
      suggestion: {
        newValue: {
          color: "purple",
        },
      },
    },
    contextualEngine: {
      loading: {
        root: {
          backgroundColor: "red",
        },
        icon: {
          display: "flex"
        }
      },
      prompt: {
        root: {
          backgroundColor: "red",
        },
        icon: {
          display: "flex"
        },
        cancelButton: {
          color: "green",
          backgroundColor: "black"
        },
        confirmButton: {
          color: "yellow",
          backgroundColor: "white"
        }
      }
    }
  },