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?
Related
Currently I'm wondering about if there is the possibility of extending components, by adding new props directly from the theme provider.
For example, let's take the IconButton component, I want to add square prop to this component
import { Components, Theme } from '#mui/material';
export const MuiIconButton: Components<Theme>['MuiIconButton'] = {
defaultProps: {
square: true
},
styleOverrides: {
root: ({ ownerState }) => ({
//here I would like to access the square prop
borderRadius: ownerState.square ? 0 : 50,
})
}
};
declare module '#mui/material/IconButton' {
interface IconButtonPropsOverrides {
square: boolean;
}
}
By taking a look into IconButton.d.ts from MUI,
export interface IconButtonPropsColorOverrides {}
export interface IconButtonPropsSizeOverrides {}
There is no override for props available...
My question is if there is any possibility of adding this override without having to alter the MUI code base. Is there a general approach over this?
Thanks
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 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..
},
};
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
Whenever I use a container in material-ui, I have to manually set the maxWidth to false. Since I don't think I will ever require the maxWidth of the container to every be anything but 100% of the available space and it is what I expect container to work, I wanted to set it globally in my react app.
What I have to do every time
import React from "react";
import Container from "#material-ui/core/Container";
import Paper from "#material-ui/core/Paper";
export default function App() {
return (
<Container maxWidth={false}>
.
.
.
</Container>
);
}
I tried setting it in the createTheme, but it does not work.
const theme = createMuiTheme({
overrides: {
MuiContainer: {
root: {
maxWidth: `100%`,
},
},
},
});
Instead of trying to override the CSS, the simplest approach is to set the default for the prop:
const theme = createMuiTheme({
props: {
MuiContainer: {
maxWidth: false
}
}
});
Related answers:
Is it possible to override material-ui components default props?
How to override Material UI .MuiContainer-maxWidthLg?