Implementation:FlowiseAI Flowise CompStyleOverride

Knowledge Sources	FlowiseAI Flowise
Domains	Theming, UI Styling
Last Updated	2026-02-12 07:00 GMT

Overview

componentStyleOverrides is a theme configuration function that returns MUI component-level style overrides for both light and dark mode across the entire Flowise UI.

Description

This function accepts a theme object and returns a comprehensive style override configuration for 16 Material-UI components including MuiCssBaseline, MuiButton, MuiSvgIcon, MuiPaper, MuiCardHeader, MuiCardContent, MuiCardActions, MuiListItemButton, MuiListItemIcon, MuiListItemText, MuiInputBase, MuiOutlinedInput, MuiSlider, MuiDivider, MuiAvatar, MuiChip, MuiTooltip, and MuiAutocomplete. Each override checks theme.customization.isDarkMode to apply the appropriate color scheme, including custom scrollbar styling for both Webkit and Firefox browsers.

Usage

Call this function during theme creation, passing the assembled theme object, and spread the returned overrides into the MUI createTheme components configuration. This is typically invoked once when the theme is initialized or when dark/light mode toggles.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/themes/compStyleOverride.js
• Lines: 1-240

Signature

export default function componentStyleOverrides(theme) {
    const bgColor = theme.colors?.grey50
    return {
        MuiCssBaseline: { ... },
        MuiButton: { ... },
        MuiSvgIcon: { ... },
        MuiPaper: { ... },
        MuiCardHeader: { ... },
        MuiCardContent: { ... },
        MuiCardActions: { ... },
        MuiListItemButton: { ... },
        MuiListItemIcon: { ... },
        MuiListItemText: { ... },
        MuiInputBase: { ... },
        MuiOutlinedInput: { ... },
        MuiSlider: { ... },
        MuiDivider: { ... },
        MuiAvatar: { ... },
        MuiChip: { ... },
        MuiTooltip: { ... },
        MuiAutocomplete: { ... }
    }
}

Import

import componentStyleOverrides from '@/themes/compStyleOverride'

I/O Contract

Inputs

Name	Type	Required	Description
theme	object	Yes	The assembled theme object containing colors, customization (isDarkMode, borderRadius), paper, menuSelected, menuSelectedBack, darkTextPrimary, darkTextSecondary, textDark, heading, divider, and backgroundDefault properties

Outputs

Name	Type	Description
(return value)	object	A component style overrides object keyed by MUI component names (e.g., MuiButton, MuiPaper), ready to be passed to createTheme's components property

Usage Examples

Basic Usage

import { createTheme } from '@mui/material/styles'
import componentStyleOverrides from '@/themes/compStyleOverride'

const theme = createTheme({
    // ...other theme config
    components: componentStyleOverrides(themeOptions)
})

Related Pages

• Principle:FlowiseAI_Flowise_Theme_Configuration