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/
Related
I have an action button in a data grid (pro):
<GridActionsCellItem icon={ <EditIcon/> } />
how can I put color="inhereted" or color="#123" to all my action icon buttons using a theme?
I want to make all my action icon buttons to default to the same color.
If you want to set the change in your theme the code below should work for you.
MuiDataGrid: {
root: {
'& .MuiDataGrid-actionsCell': {
'& .MuiSvgIcon-root': {
color: 'red'
}
}
}
}
Or you can use styled components like this
const GridActionsCellItemStyled = styled(GridActionsCellItem)(({ theme }) => ({
"& .MuiSvgIcon-root": {
color: "red"
}
}));
<GridActionsCellItemStyled
icon={<EditIcon />}
label="Edit"
/>,
I would like to modify MUI Chip color and background color "globally" but using different colors than the ones defined in the same theme for severity.
This is what actually looks like (only by using theme defined severity colors):
This is how I want it to look:
It's actually possible to achieve that by using createTheme module or I need to take a different approach?
This is my attempt:
export const defaultTheme = createTheme(
{
palette: {
// Palette definitions
},
components: {
MuiChip: {
styleOverrides: {
root: {
severity: {
success: {
color: colors.success.main,
backgroundColor: colors.success.light,
},
// And so on with the remaining severity levels
},
},
},
},
},
},
);
If you want to modify the background color in the theme, you can add a name to the theme, I provide you with an example and let you try.
export const yourTheme = createTheme({
palette: {
successChip: {
contrastText: '#5ccc09',
main: '#eaf9e0',
},
rejectChip: {
contrastText: '#ff595d',
main: '#ffe9ea',
}
}
});
<Chip label="Professional" color="successChip"/>
<Chip label="Rejected" color="rejectChip"/>
And then you will get what you want it to look like.
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:
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'
},
}
}
}
};
I have been searching the web for a while, but I could not understand how to apply the default dark theme that is shown in the site of Material-ui, where you can toggle between the light and dark theme.
They say those are default ones, but how do I use them?
Thanks!
You can use them by creating a Theme like this:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
const THEME = createMuiTheme({
palette: {
type: 'dark',
},
});
class YourComponent extends Component {
render() {
return (
<MuiThemeProvider theme={THEME}>
... your other components
</MuiThemeProvider>
)
}
}
export default YourComponent;
The toggle can be done with a button like this example.