I am using withStyles HOC to provide classes to a component:
const styles = createStyles({
Appbar: ({ backgroundColor }: BaseHeaderProps) => ({
backgroundColor
}),
// ...moreStyles
});
export default withStyles(styles, { name: 'Component' })(Component);
I also need to be able to override the very same classes/styles in the global theme overrides object:
overrides: {
Component: {
Appbar: {
backgroundColor: 'black',
},
},
// more overrides...
The problem I am facing is that the styles in the overrides object will not apply/override the classes defined in the createStyles. The only way overrides would actually override is if the styles are "prop-independent", something like:
const styles = createStyles({
Appbar: {
backgroundColor: 'some-fixed-color',
),
// ...moreStyles
});
Now, the overrides object will override this class and a black background color will be applied to the Appbar.
What I want is to be able to have this overridable functionality even when using "prop-dependent" styles, as the first one shows.
Maybe this helps: The "prop-dependent" callback that returns the style object NEVER gets called when overrides are used in the Theme. I have tried to log the theme object but it never is called.
In the documentation, another component name for overload: "The MuiAppBar name can be used for providing default props or style overrides at the theme level"
https://v4.mui.com/api/app-bar/#appbar-api
export const CustomTheme = {
overrides: {
MuiAppBar: {
backgroundColor: 'black', // ???
},
// more overrides..
},
};
Related
In the project I use MaterialUI for styling components. Now I'm creating a project theme. I need to define overrides object to create theme. I have an overrides object in which I override the colorPrimary for the AppBar. I need to use overrides object to create theme. How can i do this?
// TODO: define overrides object to create theme
const overrides = {
MuiAppBar: {
colorPrimary: {
backgroundColor: "#662E9B",
},
},
};
const theme = createTheme({});
// TODO: use overrides object to create theme
// const theme =;
export {
overrides
};
export default theme;
There are two scenarios that I will give you as an answer here, because I am not sure what exactly is your need.
Scenario A: You want to style all your objects with a new primary color. Not only MuiAppBar, but propagate this to everything else such as buttons, checkboxes... for that, you should go like this:
export const theme = createTheme({
palette: {
primary: { main: "#662E9B" }
},
}
Where as "#662E9B" is your custom primary color. MaterialUI will take care of generating your palette based on your the hex color you provided.
Scenario B: You want your colors to remain the same, but changing only the MuiAppBar backgroundColor
const overrides = {
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: "#662E9B"
}
}
}
export const theme = createTheme({
components: { ...overrides }
}
Now, for Scenario B, in case const overrides is not being used anywhere else in your code, I would suggest you to just do it like so:
export const theme = createTheme({
components: {
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: "#662E9B"
}
}
}
}
}
Meaning that there would be no need for doing things separatly.
I'm not sure if this is possible or not, after looking at Material UI's documentation on How to Customize, but I'm trying to isolate styleOverrides for a given component using styled() rather than applying a lot of overrides within a global theme file.
Currently, my theme file looks something like this, with some typography and palette overriding Material UI's default theme:
const theme = createTheme({
palette: { ...
},
typography: { ...
}
});
When I use a Chip component (rendered in Storybook currently) and pass in success, primary, secondary, etc. into the color prop, the corresponding theme colors are applied. However, when I try to override the theme files, using styled(), the colors defined in the theme are still being applied - as opposed to my overrides defined. My component file looks like the following:
import { styled } from '#mui/material/styles';
import MuiChip, { ChipProps } from '#mui/material/Chip';
const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
colorPrimary: {
backgroundColor: theme.palette.primary.light
},
colorSecondary: {
backgroundColor: theme.palette.secondary.light
}
}));
export default Chip;
You can create your own custom variant and define your own styles to it
const theme = createTheme ({
components : {
MuiButton : {
variants : [
{ props : { variant : 'YouVarName'},
style: { //..your styles } ,
},},
I have an application that utilizes box's in place of where divs would typically be placed to stay within the MUI ecosystem. My question is, is it possible to have a global theme override for all box components much like how you can globally override the background color for all cards using theme provider.
You can override the Card styles globally using createTheme() because the Card has a name and a styleOverrides callback when it is styled using the styled() API. However, the Box does not, as you can see from the definition here.
const theme = createTheme({
components: {
// this works
MuiCard: {
styleOverrides: {
//
}
},
// this does not work
MuiBox: {
styleOverrides: {
//
}
}
}
});
If you want to create a base component like the Box that can be styled globally by createTheme, you need to define the following properties in the options when calling styled()
name: so the styled engine can identify your component.
overridesResolver: to let MUI know how to resolve the final styles (by combining with other styles created by custom variant, prop and state of the component).
Below is the minimal example for demonstration:
const theme = createTheme({
components: {
MuiDiv: {
styleOverrides: {
root: {
backgroundColor: "green"
}
}
}
}
});
const Div = styled("div", {
name: "MuiDiv",
overridesResolver: (props, styles) => {
return [styles.root];
}
})();
<Div sx={{ width: 10, height: 10 }} />
Live Demo
References
https://mui.com/system/styled/#api
https://mui.com/system/styled/#custom-components
const MySlider = withStyles({
root: {
color: theme => theme.palette.primary.main
}
}, {withTheme: true})(Slider);
I did expect the withTheme option would make the theme accessible inside withStyles. If so then how? because theme is not defined and its also not found in props ?
Any idea
withStyles function can accept a callback instead of an object giving you the access to the theme object like this
const NewButton = withStyles((theme) => {
root: {
color: theme.palette.primary
}
}, { withTheme: true })(Button);
I am trying to apply StepIcon styling as part of Stepper component, where eventually I would like to render the completed step icon color.
In my StepLabel component I am applying:
<StepLabel
StepIconProps={{classes: {completed: classes.stepIcon}}}>{label}</StepLabel>
My classes:
export const MyStepper = withStyles(theme => ({
stepIcon: {
color: 'red',
},
}))(Stepper);
But when inspecting the classes with dev tools seems like the the MuiTheme class always overrides my custom override:
What am I doing wrong?