Using "#material-ui/core" at version 3.1.0
It's pretty easy to override globally a stepper icon's color globally
createMuiTheme({
overrides: {
MuiStepIcon: {
root: {
color: "#F00"
},
}
}
})
However, it's not clear how you would override the only the color for an icon for either a StepButton or StepLabel using the recommended methods. I see that you can pass in your own icon element, but I don't want to replicate the library logic for the step number and the checkmark.
Is there an clean way to do this?
StepLabel provides a StepIconProps property that allows you pass custom props to the StepIcon component. (docs)
You can use the classes prop to customize StepIcon styles.
<Step key={label}>
<StepLabel
StepIconProps={{
classes: { root: classes.icon }
}}
>
{label}
</StepLabel>
</Step>
Non-linear steppers
You can nest a StepLabel component inside StepButton when you need to pass custom props to StepIcon. (docs)
<Step key={label}>
<StepButton
onClick={this.handleStep(index)}
completed={this.state.completed[index]}
>
<StepLabel
StepIconProps={{ classes: { root: classes.icon } }}
>
{label}
</StepLabel>
</StepButton>
</Step>
I was also facing the same problem, So I Raised the issue in Mui repo, received this reply- we are not using the Mui-active and Mui-completed class in v4, In v5 you should use the Mui-active and Mui-completed classes.
So according to them this will fix the issue for now-
Declare style like this -
stepIconRoot: {
color: "pink",
"&.MuiStepIcon-active": {
color: "red"
},
"&.MuiStepIcon-completed": {
color: "green"
}
}
and put this inside <Step> </Step>
<StepLabel
StepIconProps={{
classes: {root: classes.stepIconRoot}
}}>
{label}
</StepLabel>
https://codesandbox.io/s/material-ui-override-step-icon-color-forked-rcpqw?file=/demo.js:3095-3456
To apply these changes as global you can use the following
createMuiTheme({
overrides: {
MuiStepIcon: {
root: {
color: "#F00",
"&$active": {
color: "#C4E90C"
},
"&$completed": {
color: "#C4E90C"
}
},
}
}
})
Related
I am having trouble styling the Menu component in Material-UI v5.
I have this UI:
<Menu
defaultValue={undefined}
id="simple-menu"
open={openMenu}
onClose={onCloseHandler}
anchorEl={anchorEl}
MenuListProps={{ onMouseLeave: onCloseHandler }}
elevation={0}
sx={{ color: "white", backgroundColor: "blue" }}
>
When I use this code all the UI gets blue:
After that I try to apply global style overrides to the paper of the menu, but nothing happened. The styles did not change:
components: {
MuiMenu: {
styleOverrides: {
paper: {
backgroundColor: arcBlue,
color: arcBlue,
borderRadius: "0px",
},
},
}
}
Please some help here
Passing sx directly on the Menu component applies the styles to the component's root (which is what's causing your style modifications to apply to the overlay blanket).
In your case, since you're attempting to only style the MUI list portion of the menu, you want to pass the sx prop directly to the underlying list component, using the MenuListProps prop. For example:
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
sx: { backgroundColor: "blue" }
}}
>
Which produces:
Working CodeSandbox: https://codesandbox.io/s/twilight-glitter-cj83rc?file=/demo.tsx:758-951
Having two appBars components in the same page is a good approach (one as header and the other one as footer)? Besides, I am using the MUI createTheme to override some styles. I am doing this to override the appBar component.
components: { ...
MuiAppBar: {
styleOverrides: {
root: {
minHeight: '4.375rem',
backgroundColor: appColors.aqua600,
},
},
}, ...
This works fine, but as was wondering how could I override the style of an AppBar that is renders as 'header' and style the other appBar that is rendered as 'footer'
The component usage:
<AppBar
component="header | footer" ...
</AppBar>
I know that can be easily done with CSS, but I was wondering if this can be done using the createTheme from MUI?
It can be done by overriding styles based on props using ownerState.
Overrides based on props
You can pass a callback as a value in each slot of the component's styleOverrides to apply styles based on props.
The ownerState prop is a combination of public props that you pass to the component + internal state of the component.
You can check more on docs.
So, the custom theme for MuiAppBar should be something like this:
components: {
MuiAppBar: {
styleOverrides: {
root: ({ ownerState }) => {
return {
...(ownerState.component === "header" && {
backgroundColor: "#202020"
})
};
}
}
}
}
How to change/customize the default color of selected rows in a Material-UI table (of type Sorting & Selecting)? By default it is secondary (red) color (Codesandbox here: https://codesandbox.io/s/3sjxh). How to change it to a custom color, or at least to primary (blue), as it appears in the new beta version (https://next.material-ui.com/components/tables/#main-content) (v5).
You have to pass your styles to the classes props in order to change the styles for the TableRow.
To achieve the background-color change you want to override the default classes: .MuiTableRow-root.Mui-selected and .MuiTableRow-root.Mui-selected:hover.
To override them you have to use a parent reference with a so called $ruleName in your makeStyles hook. Here is a very good explanation from #Ryan Cogswell if you are more interested how it works.
This would then look like this:
const useStyles = makeStyles((theme) => ({
// your other styles
...,
tableRowRoot: {
"&$tableRowSelected, &$tableRowSelected:hover": {
backgroundColor: theme.palette.primary.main
}
},
tableRowSelected: {
backgroundColor: theme.palette.primary.main
}
}));
...
<TableRow
// your other props
...
classes={{
root: classes.tableRowRoot,
selected: classes. tableRowSelected,
}}
>
...
</TableRow>;
For the checkboxes, you only have to add the color prop in order to change it:
<Checkbox
// other props
...
color="primary"
/>
and for your Toolbar, you only need to change the provided highlight class inside your useToolbarStyles in order to get things working:
import { alpha } from "#material-ui/core/styles";
...
const useToolbarStyles = makeStyles((theme) => ({
...,
highlight:
theme.palette.type === "light"
? {
color: theme.palette.primary.main,
backgroundColor: alpha(
theme.palette.primary.light,
theme.palette.action.selectedOpacity
)
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.primary.dark
},
}));
Live demo:
Basically, I can change the colors of all Button elements in my theme, but I've been unable to do the same for AppBar. I'm puzzled. Here's a snippet of my code:
overrides: {
MuiButton: {
root: {
background: 'blue',
},
label: {
color: 'white',
}
},
MuiAppBar: {
root: {
background: 'white'
}
},
I've tried a lot of different variations on that, but nothing works. Please advise!
The problem you are seeing is due to the color prop in AppBar overriding your custom styling. By default, your .MuiAppBar-root class styling is being applied as expected, but the .MuiAppBar-colorPrimary class is setting the background-color to the default theme primary color. This differs from MuiButton which has the color prop set to "default" if you don't explicitly set it. If you change this to 'inherit' or 'default', the custom color should work for you.
export default function CustomAppBar() {
const theme = createMuiTheme({
overrides: {
MuiAppBar: {
root: {
background: "white"
}
}
}
});
return (
<ThemeProvider theme={theme}>
<AppBar color="default">
...
</AppBar>
</ThemeProvider>
);
}
Resources:
https://material-ui.com/api/button/
https://material-ui.com/api/app-bar/
Is it possible to override the default style of a particular Material UI component style? Let's say I want have different types of MuiButton's...
<Button color="primary" variant="contained">Foo</Button>
<Button variant="text">Foo</Button>
With the default styles the first button will have a white text color and the second one will have a black text color. If I would like to change the text color default globally (which in this case I won't) I should use the following options for createMuiTheme:
const options = {
overrides: {
MuiButton: {
root: {
color: 'white',
}
}
}
};
However in this case I would only like to change the text color of the primary colored and contained variant button. How do I do this?
From the documentation it was not very clear to me but apparently you can target different classes in the component like so:
const options = {
overrides: {
MuiButton: {
containedPrimary: {
'& > .MuiButton-label': {
color: 'white'
},
}
}
}
};