Is there a way to customize the default material-ui theme using global CSS? Additionally, how can we incorporate HEX values for colors when setting primary and secondary colors in the theme?
In my App.js root file, I have defined a custom theme and want to include an external CSS file (custom-style.css) in order to override Material-UI's default styling. However, I am struggling to style form element colors for different states and button state colors.
Below is the code snippet:
App.js
const theme = createMuiTheme({
palette: {
primary: '#2765af',
secondary: '#f56428',
},
status: {
danger: 'orange',
},
});
function App(){
<ThemeProvider theme={theme}>
...
<ThemeProvider>
}
Using HEX codes directly results in compilation errors. Also, without including the theme object and adding the custom CSS file (custom-styles.css) in App.js, the default styles override the customized ones.
If anyone has a solution or workaround, please assist me with this issue.