Style Overrides

The Dromo Uploader supports custom CSS styling. You can use the styleOverrides prop to customize the appearance of the uploader.

object

default:"{}"

Specify custom CSS styling on any UI element to make it match your brand requirements.

For a visual overlay of the available styling options, see the guide to customizing styles.

object

Style overrides that affect the general UI of the Dromo Uploader

string

The primary text color

string

The secondary text color

string

A URL to a custom font file

string

The name of the font family provided by the custom font file

string

default:"#ffffff"

Added in v2The background color of the modal

string

default:"8px"

Added in v2The border radius of the modal

string

default:"none"

Added in v2The border style of the modal

string

default:"none"

Added in v2The border width of the modal

string

default:"none"

Added in v2The border color of the modal

string

default:""

The general text color for UI elements

string

default:""

Color used for success states and messages

string

default:""

Color used for warning states and messages

boolean

default:"true"

Whether to apply a blur effect to the background when modals are open

object

default:"{}"

Style overrides for the primary action button

string

The radius of the button

string

The background color of the button

string

The color of the text in the button

string

The border shorthand property to apply to the button

string

The background color of the button while hovering

string

The text color of the button while hovering

string

The border shorthand property to apply to the button while hovering

string

default:"#e5e7eb"

The background color of the button when it is disabled

string

default:"#6b7280"

The text color of the button when it is disabled

string

default:"8px 12px"

The padding of the button

object

default:"{}"

Style overrides for the secondary action button

string

The radius of the button

string

The background color of the button

string

The color of the text in the button

string

The border shorthand property to apply to the button

string

The background color of the button while hovering

string

The text color of the button while hovering

string

The border shorthand property to apply to the button while hovering

string

default:"#e5e7eb"

The background color of the button when it is disabled

string

default:"#6b7280"

The text color of the button when it is disabled

string

default:"8px 12px"

The padding of the button

object

default:"{}"

Style overrides for the tertiary action button

string

The radius of the button

string

The background color of the button

string

The color of the text in the button

string

The border shorthand property to apply to the button

string

The background color of the button while hovering

string

The text color of the button while hovering

string

The border shorthand property to apply to the button while hovering

string

default:"#e5e7eb"

The background color of the button when it is disabled

string

default:"#6b7280"

The text color of the button when it is disabled

string

default:"8px 12px"

The padding of the button

object

default:"{}"

Style overrides for the file dropzone on the upload screen

number

default:"2"

The width of the dropzone border in pixels

number

default:"8"

The radius of the dropzone border in pixels

string

The color of the dropzone border

string

default:"dashed"

The style of the dropzone border

string

The background color of the dropzone

string

The outline property of the dropzone

object

default:"{}"

Style overrides for the help text boxes

string

The text color of the help text

string

The background color of the help text box

object

default:"{}"

Style overrides for the progress bar in the header

string

The color of completed steps

string

The color of steps that have not been started yet

string

The color of the step currently in progress

string

default:"1rem"

Added in v2The font size of the step text

string

default:"bold"

Added in v2The font weight of completed steps

string

default:"normal"

Added in v2The font weight of incomplete steps

string

default:"bold"

Added in v2The font weight of the current step

string

Added in v2The background color of the stepper bar

string

Added in v2The bottom border separating the stepper bar from the rest of the modal

object

default:"{}"

Style overrides for the data table (Handsontable) component

string

The font weight of column headers

string

The background color of column headers

string

The text color of column headers

string

The background color of row headers (row numbers)

string

The text color of row headers (row numbers)

string

The background color of the corner header (top-left cell)

string

The border color of selected cells

string

The background color of selected cells

string

General accent color that affects various interactive elements in the table

string

The background color of active column headers

string

The text color of active column headers

string

The background color of highlighted column headers

string

The text color of highlighted column headers

Style overrides for modal overlay backdrop

string

The background color of the modal overlay

string

default:"50"

The opacity of the modal overlay (0-100)

object

default:"{}"

Style overrides for the Error Navigator panel shown during the Review Step when enableNavigatingErrors is true. All color values accept any valid CSS color string (hex, rgb, hsl, CSS variables, etc.).

string

default:"#CD0013"

Color applied to error-level indicator icons, error message text, and the error issue count badge.

string

default:"#CA8A04"

Color applied to warning-level indicator icons and warning message text.

string

default:"Dromo blue"

Color applied to the primary action buttons (“Replace”, “Apply”) and the active column filter chip border and text.

string | null

default:"null"

URL of a custom image to display in place of the default exclamation circle icon for error rows. The image renders at 12×12 px with object-contain. Set to null to use the default icon.

string | null

default:"null"

URL of a custom image to display in place of the default exclamation circle icon for warning rows. The image renders at 12×12 px with object-contain. Set to null to use the default icon.

styleOverrides: {
  errorNavigator: {
    errorColor: "#B91C1C",
    warningColor: "#D97706",
    accentColor: "#6366F1",
    errorIconUrl: "https://cdn.example.com/error-icon.svg",
    warningIconUrl: null,
  }
}

Getting Started

Guides

Reference

FAQ & Changelog