Skip to main content
The Dromo Uploader supports custom CSS styling. You can use the styleOverrides prop to customize the appearance of the uploader.
​
styleOverrides
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.
​
global
object
Style overrides that affect the general UI of the Dromo Uploader
​
primaryTextColor
string
The primary text color
​
secondaryTextColor
string
The secondary text color
​
customFontURL
string
A URL to a custom font file
​
customFontFamily
string
The name of the font family provided by the custom font file
​
backgroundColor
string
default:"#ffffff"
Added in v2The background color of the modal
​
borderRadius
string
default:"8px"
Added in v2The border radius of the modal
​
borderStyle
string
default:"none"
Added in v2The border style of the modal
​
borderWidth
string
default:"none"
Added in v2The border width of the modal
​
borderColor
string
default:"none"
Added in v2The border color of the modal
​
textColor
string
default:""
The general text color for UI elements
​
successColor
string
default:""
Color used for success states and messages
​
warningColor
string
default:""
Color used for warning states and messages
​
backdropBlur
boolean
default:"true"
Whether to apply a blur effect to the background when modals are open
​
primaryButton
object
default:"{}"
Style overrides for the primary action button
​
borderRadius
string
The radius of the button
​
backgroundColor
string
The background color of the button
​
textColor
string
The color of the text in the button
​
border
string
The border shorthand property to apply to the button
​
hoverBackgroundColor
string
The background color of the button while hovering
​
hoverTextColor
string
The text color of the button while hovering
​
hoverBorder
string
The border shorthand property to apply to the button while hovering
​
secondaryButton
object
default:"{}"
Style overrides for the secondary action button
​
borderRadius
string
The radius of the button
​
backgroundColor
string
The background color of the button
​
textColor
string
The color of the text in the button
​
border
string
The border shorthand property to apply to the button
​
hoverBackgroundColor
string
The background color of the button while hovering
​
hoverTextColor
string
The text color of the button while hovering
​
hoverBorder
string
The border shorthand property to apply to the button while hovering
​
dropzone
object
default:"{}"
Style overrides for the file dropzone on the upload screen
​
borderWidth
number
default:"2"
The width of the dropzone border in pixels
​
borderRadius
number
default:"8"
The radius of the dropzone border in pixels
​
borderColor
string
The color of the dropzone border
​
borderStyle
string
default:"dashed"
The style of the dropzone border
​
backgroundColor
string
The background color of the dropzone
​
outline
string
The outline property of the dropzone
​
helpText
object
default:"{}"
Style overrides for the help text boxes
​
textColor
string
The text color of the help text
​
backgroundColor
string
The background color of the help text box
​
stepperBar
object
default:"{}"
Style overrides for the progress bar in the header
​
completeColor
string
The color of completed steps
​
incompleteColor
string
The color of steps that have not been started yet
​
currentColor
string
The color of the step currently in progress
​
fontSize
string
default:"1rem"
Added in v2The font size of the step text
​
completeFontWeight
string
default:"bold"
Added in v2The font weight of completed steps
​
incompleteFontWeight
string
default:"normal"
Added in v2The font weight of incomplete steps
​
currentFontWeight
string
default:"bold"
Added in v2The font weight of the current step
​
backgroundColor
string
Added in v2The background color of the stepper bar
​
borderBottom
string
Added in v2The bottom border separating the stepper bar from the rest of the modal
​
dataTable
object
default:"{}"
Style overrides for the data table (Handsontable) component
​
headerFontWeight
string
The font weight of column headers
​
headerBackgroundColor
string
The background color of column headers
​
headerTextColor
string
The text color of column headers
​
rowHeaderBackgroundColor
string
The background color of row headers (row numbers)
​
rowHeaderTextColor
string
The text color of row headers (row numbers)
​
cornerHeaderBackgroundColor
string
The background color of the corner header (top-left cell)
​
cellSelectionBorderColor
string
The border color of selected cells
​
cellSelectionBackgroundColor
string
The background color of selected cells
​
accentColor
string
General accent color that affects various interactive elements in the table
​
headerActiveBackgroundColor
string
The background color of active column headers
​
headerActiveTextColor
string
The text color of active column headers
​
headerHighlightedBackgroundColor
string
The background color of highlighted column headers
​
headerHighlightedTextColor
string
The text color of highlighted column headers
​
modalOverlay
object
default:"{}"
Style overrides for modal overlay backdrop
​
backgroundColor
string
The background color of the modal overlay
​
opacity
string
default:"50"
The opacity of the modal overlay (0-100)
⌘I