Skip to main content

Styling Guide

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​

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:

<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(only for vanilla JS, Vue & Angular) - This key helps you to define a maximum height of the iframe.

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

<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",
      },
    },
  }}
>
  Select File
</NuvoImporter>

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: {},
  buttons: {},
  progressBar: {},
  header: {},
  dropzone: {},
  footer: {},
  sheetSelect: {},
  headerSelect: {},
  joinSheet: {},
  columnMatch: {},
  reviewEntries: {},
  popover: {},
  dialog: {},
  messagePopup: {},
  popoverInfo: {},
  loader: {}
}

buttons​

If you want to change the styling of the nuvo importer buttons, you can use the buttons key for it. It allows you to control the backgroundColor, borderColor, color, padding, fontSize, borderRadius as well as the :hover and :active CSS classes of the buttons. There are two types of buttons:

  • primary - This allows you to control the primary buttons within the nuvo importer like the "Import data"- and the "Select file"-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.
  • 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",
      },
    },
  },
}
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: {
      fill: "red",
    },
    current: {
      color: "darkblue",
      fontSize: "18px",
      fontWeight: "600"
    },
    complete: {
      color: "green"
    },
    incomplete: {
      color: "yellow"
    }
  }
}

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"-card. It contains the same theming options as root with additional nested options for content: root, title, description and illustration.
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"
      }
    }
  }
}
info

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

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.
  • 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 and checkbox.
  • 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.
style: {
  sheetSelect: {
    root: {
      backgroundColor: "#E1E1E1",
      border: "1px solid black",
    },
    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"
      },
      checked: {
        root: {
          borderColor: "red",
          backgroundColor: "blue",
          backgroundColor: "yellow"
        },
        title: {
          color: "green"
        },
        description: {
          color: "yellow"
        },
        checkbox: {
          backgroundColor: "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"
      }
    }
  }
}

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.
  • 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"
    },
    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.
  • content - Controls the styles of the table content which is displayed as example data from the sheet.
  • sheet - Controls the styles of the header which shows the information of the sheet on the top of each example table. The nested options are fileName, name and icon.
  • matchStatus - Controls the styles of the box which displays the matching percentage of the selected join column for each sheet with the selected join column of the first sheet. The nested options are warning, success, error and loading.
  • table - Controls the styles of table wherre example data from each sheet is displayed. The nested options are root, th, td, scrollbar, selectColumnColor and hoverColumnColor.
style: {
  joinSheet: {
    root: {
      backgroundColor: "green",
      borderRadius: "20px",
    },
    content: {
      backgroundColor: "white"
    },
    sheet: {
      fileName: {
        color: "red"
      },
      name: {
        color: "blue"
      },
      icon: {
        valid: "red",
        invalid: "green",
      }
    },
    matchStatus: {
      warning: {
        root: {
          backgroundColor: "lightblue",
          color: "orange",
        },
        icon: {
          color: "orange"
        },
        percent: {
          backgroundColor: "blue",
          color: "white",
        }
      },
      success: {
        root: {
          backgroundColor: "lightblue",
          color: "green",
        },
        icon: {
          color: "green"
        },
        percent: {
          backgroundColor: "blue",
          color: "white",
        }
      },
      error: {
        root: {
          backgroundColor: "lightblue",
          color: "red",
        },
        icon: {
          color: "red"
        },
        percent: {
          backgroundColor: "blue",
          color: "white",
        }
      },
      loading: {
        root: {
          backgroundColor: "lightgreen",
          color: "black",
        },
        icon: {
          color: "blue"
        },
      }
    },
    table: {
      root: {
        backgroundColor: "green",
        borderColor: "red",
      },
      th: {
        backgroundColor: "blue",
        color: "green",
        borderColor: "red",
      },
      td: {
        backgroundColor: "yellow",
        color: "red",
        borderColor: "green",
      },
      scrollbar: {
        navigatorColor: "red",
        backgroundColor: "blue",
      },
      selectColumnColor: "purple",
      hoverColumnColor: "pink",
    }
  }
}

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.
  • 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 card.
  • matchingPercent - Controls the stylings of the row value percentage, which is shown in the second row on the right side of each matching card.
  • notMatchingValue - Controls the stylings of the row, which is shown in the third row on the right side of each matching card. 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 card with addition options: root, icon and dropdown
  • columnMatchValue - Controls the stylings of the value rows displayed inside the left section of each matching card. It also contains additional nested options: root, icon, scrollbar, and dropdown
  • requiredColumns - Controls the stylings of the "Required Columns"-section within the footer.
  • buttonJoined - Controls the styling of the button which show on the join column. The nested options are root and icon.
  • dialogJoinColumn Controls the styling of the modal and content which shows example rows for joined columns. The nested options are root, overlay, closeIcon, title, description and table.
style: {
  columnMatch: {
    root: {
      color: "blueviolet",
      borderColor: "red"
    },
    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"
      },
    },
    buttonJoined: {
      root: {
        backgroundColor: "red",
        color: "green",
      },
      icon: {
        color: "white"
      }
    },
    dialogJoinColumn: {
      root: {
        backgroundColor: "green"
      },
      overlay: {
        backgroundColor: "black"
      },
      closeIcon: {
        stroke: "white"
      },
      title: {
        color: "red"
      },
      description: {
        color: "orange"
      },
      table: {
        wrapper: {
          backgroundColor: "green",
          borderRadius: 20,
        },
        root: {
          borderColor: "black",
          borderRadius: 20,
        },
        background: {
          backgroundColor: "violet"
        },
        title: {
          color: "gold"
        },
        description: {
          color: "purple"
        },
        th: {
          backgroundColor: "blue",
          color: "red",
          borderColor: "black",
        },
        td: {
          color: "blue",
          backgroundColor: "red",
          borderColor: "black",
        },
        scrollbar: {
          backgroundColor: "black",
          navigatorColor: "red",
        }
      }
    }
  }
}

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.
  • 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.
style: {
  reviewEntries: {
    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",
        },
      },
    },
  }
}

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.
  • successIcon - Controls the style of the pop-up success animation.
  • 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",
    },
    successIcon: {
      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",
  }
}

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",
  },
  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"
      }
    },
  },
  footer: {
    root: {
      backgroundColor: "#E1E1E1",
    }
  },
  sheetSelect: {
    root: {
      backgroundColor: "#E1E1E1",
      border: "1px solid black",
    },
    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",
      },
      checked: {
        root: {
          borderColor: "red",
          backgroundColor: "blue",
          backgroundColor: "yellow",
        },
        title: {
          color: "green"
        },
        description: {
          color: "yellow"
        },
        checkbox: {
          backgroundColor: "red"
        }
      },
      container: {
        backgroundColor: "white",
      }
    },
    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"
        }
      },
      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"
      }
    }
  },
  headerSelect: {
    root: {
      borderRadius: "20px",
    },
    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",
    },
    content: {
      backgroundColor: "white"
    },
    sheet: {
      fileName: {
        color: "red"
      },
      name: {
        color: "blue"
      },
      icon: {
        valid: "red",
        invalid: "green",
      }
    },
    matchStatus: {
      warning: {
        root: {
          backgroundColor: "lightblue",
          color: "orange",
        },
        icon: {
          color: "orange"
        },
        percent: {
          backgroundColor: "blue",
          color: "white",
        }
      },
      success: {
        root: {
          backgroundColor: "lightblue",
          color: "green",
        },
        icon: {
          color: "green"
        },
        percent: {
          backgroundColor: "blue",
          color: "white",
        }
      },
      error: {
        root: {
          backgroundColor: "lightblue",
          color: "red",
        },
        icon: {
          color: "red"
        },
        percent: {
          backgroundColor: "blue",
          color: "white",
        }
      },
      loading: {
        root: {
          backgroundColor: "lightgreen",
          color: "black",
        },
        icon: {
          color: "blue"
        },
      }
    },
    table: {
      root: {
        backgroundColor: "green",
        borderColor: "red",
      },
      th: {
        backgroundColor: "blue",
        color: "green",
        borderColor: "red",
      },
      td: {
        backgroundColor: "yellow",
        color: "red",
        borderColor: "green",
      },
      scrollbar: {
        navigatorColor: "red",
        backgroundColor: "blue",
      },
      selectColumnColor: "purple",
      hoverColumnColor: "pink",
    }
  },
  columnMatch: {
    root: {
      color: "blueviolet",
      borderColor: "red",
    },
    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",
      },
    },
    buttonJoined: {
      root: {
        backgroundColor: "red",
        color: "green",
      },
      icon: {
        color: "white"
      }
    },
    dialogJoinColumn: {
      root: {
        backgroundColor: "green"
      },
      overlay: {
        backgroundColor: "black"
      },
      closeIcon: {
        stroke: "white"
      },
      title: {
        color: "red"
      },
      description: {
        color: "orange"
      },
      table: {
        wrapper: {
          backgroundColor: "green",
          borderRadius: 20,
        },
        root: {
          borderColor: "black",
          borderRadius: 20,
        },
        background: {
          backgroundColor: "violet"
        },
        title: {
          color: "gold"
        },
        description: {
          color: "purple"
        },
        th: {
          backgroundColor: "blue",
          color: "red",
          borderColor: "black",
        },
        td: {
          color: "blue",
          backgroundColor: "red",
          borderColor: "black",
        },
        scrollbar: {
          backgroundColor: "black",
          navigatorColor: "red",
        }
      }
    }
  },
  reviewEntries: {
    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",
        },
      },
    },
  },
  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",
    },
    successIcon: {
      stroke: "red",
    },
    closeIcon: {
      stroke: "blue",
    },
  },
  popoverInfo: {
    backgroundColor: "white",
    color: "red",
  },
  loader: {
    root: {
      backgroundColor: "#f2f2f2",
    },
    content: {
      color: "green",
    },
    loadAnimationColor: "green",
  }
}