Open richardchunyc opened 2 years ago
@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 :
palette.text.primary
: Color of the iconpalette.divider
: Outlinepalette.background.paper
: Background colorpalette.primary.light
: Outlinepalette.background.paper
& palette.divider
: Colors of the alternating stripes.palette.error.main
: Outlinepalette.error.light
& palette.error.dark
: Colors of the alternating stripesIn 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.)
hello,
anyone have experience overriding the stripe color theme? Any help would be greatly appreciated. Thanks.