Stripe color theme override, is it possible?

[richardchunyc]

hello,

anyone have experience overriding the stripe color theme? Any help would be greatly appreciated. Thanks.

[MatthijsMud]

@richardchunyc
Not sure if still relevant 3 months after the question was asked, but the colors are pulled from Material-UI's Theme object. This allows it to follow the colors of whichever theme is in use, and thus
enables us to change which show up (file that picks the colors to use: DropzoneAreaBase ). The colors which are in use, are as follows :

• General
  • palette.text.primary: Color of the icon
  • palette.divider: Outline
  • palette.background.paper: Background color
• Dragging a file that is supported
  • palette.primary.light: Outline
  • palette.background.paper & palette.divider: Colors of the alternating stripes.
• Dragging a file that is not supported
  • palette.error.main: Outline
  • palette.error.light & palette.error.dark: Colors of the alternating stripes

In order to change the colors, you would thus have to create a theme that gets injected in your application. Note also that palette.divider is used both as a stripe color and outline in a different state, and similirarly palette.background.paper is used as a stripe color and background.

import { createTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';

// You might want to pick some colors that go better together…
const theme = createTheme({
  palette: {
    primary: {
      light: "orange",
    },
    divider: "black,
    background: { 
      paper: "violet",
    },
    error: {
      main: "silver",
      light: "red",
      dark: "green",
    },
    text: {
      primary: "yellow",
    },
  },
});

Do note however that these colors also affect other components that are not necessarily related to one another. As such, it would probably be a good idea to wrap the material-ui-dropzone in a nested ThemeProvider. This to limit the amount of components that are affected by your chosen colors.

const theme = createTheme({}); // Default theme for the rest of the application
const dropzoneTheme = createTheme({ /* Theming as described earlier. */});

export const App = () => { 
  return <ThemeProvider theme={theme}>
    <ThemeProvider theme={dropzoneTheme}>
      <DropzoneArea onChange={()=>{ }}/>
    </ThemeProvider>
  </ThemProvider>
}

(Above code is untested, so might not be 100% accurate, but should get the idea accross.)