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.
Related
I am trying to change the header text color on pages in Backstage (Spotify's open source software catalog). I have tried using themes as advised in Backstage documentation, but there is no way to specifically override the header text color (I can change the background colour, but not the color of the text.
I have tried a few solutions - this changes the background color of the header to white but the text remains white (default color) and actual header text cannot be read (white text on white background):
genPageTheme({colors: ['#ffffff', '#ffffff'], shape: shapes.wave})
I then found the ability to add a fontColor to the genPageTheme function and tried the following, but again it did not change the header color - I am not sure if I am calling it incorrectly:
genPageTheme({colors: ['#ffffff', '#ffffff'], shape: shapes.wave, options: {fontColor: '#B1D8FF'} }),
I also took a look at customizing the overall theme but found there is no field that allows the header to be modified (neither background nor text):
const myTheme = createTheme({
palette: {
...lightTheme.palette,
primary: {
main: '#2670A9',
},
:
:
I figure there is a way to do this using material-ui (MUI) directly since Backstage uses MUI but I would like to stay true to the Backstage customization approach of using their themes.
Any ideas how the header text color can be changed? Any ideas would be helpful!
You need to use BackstageOverrides. This will allow you to override default Backstage settings.
This will allow you to customize (a lot) your application.
A simple example:
import { BackstageOverrides } from '#backstage/core-components';
import { BackstageTheme } from '#backstage/theme';
export const customThemeOverrides = (
theme: BackstageTheme,
): BackstageOverrides => {
return {
BackstagePage: {
root: {
display: 'grid',
overflow: 'hidden !important',
gridTemplateColums: '30px 280px 3fr 30px',
gridTemplateAreas:
'"header header header header" ". sidenav content ." ". sidenav content . "',
},
},
BackstageHeader: {
header: {
height: '80px',
gridArea: 'header',
display: 'flex',
borderBottom: `1px solid #FFFFFF`,
backgroundImage: `none`,
backgroundPosition: 'center',
padding: '50px',
boxShadow: 'none',
background: `#FFFFFF`
},
rigthItemsBox: {
color: '#FFFFFF',
},
title: {
color: `#FFFFFF`,
fontSize: 24,
},
subtitle: {
color: `#666666`,
},
type: {
color: `#FFFFFF`,
},
},
BackstageHeaderLabel: {
label: {
color: '#FFFFFF',
},
root: { color: '#FFFFFF', },
value: { color: '#FFFFFF' },
},
};
};
inb4: I am totally new to material-ui.
Hi all,
I guess I have a bit of a weird question. I have a react application based on bootstrap and want to slowly migrate to material-ui.
Best case I can adapt the styling currently present for bootstrap in material-ui.
I started with adjusting the colors in the palette (createMuiTheme) and using this theme in every new component.
However, I can not figure out how to, for example, change the bg-color of a list item depending if it is odd or even numbered.
Also, can I change border-colors based on the theme? Do I need to use overrides for this? If so, is there a best-practice approach?
Apologies if this is documented somewhere.
Olli
edit:
my current theme looks like this:
const theme = createMuiTheme({
palette: {
primary: {
main: '#009afe' // primary color
},
secondary: {
main: '#1a4361' // secondary color
},
error: {
main: '#c72525' // error color
},
warning: {
main: '#f89406' // warning color
},
info: {
main: '#009afe' // primary color
},
success: {
main: '#3a8e3a' // success color
},
background: {
default: '#272b30', // third background color
paper: '#1c1e22', // third background color
secondary: '#272b30'
},
text: {
primary: '#c8c8c8', // primary text color
secondary: '#ffffff'
}
},
typography: {
fontSize: 20
},
overrides: {
MuiCssBaseline: {
'#global': {
html: {
WebkitFontSmoothing: 'auto'
}
}
}
}
I extended background to hold more values than one, but I honestly don't know if it's against the rules of material-design.
Figured it out (I guess). My question was not.... smart:
How I "solved" it:
const theme = createMuiTheme({
palette: [...]
typography: [...]
overrides: {
MuiListItem: {
root: {
backgroundColor: '#272b30' // primary bg color
},
button: {
'&:nth-child(odd)': {
backgroundColor: '#1c1e22' // third bg color
},
'&:nth-child(even)': {
backgroundColor: '#202429' // fourth bg color
},
'&:hover': {
backgroundColor: '#3e444c !important' // fifth bg color
}
}
}
}
});
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'
},
}
}
}
};
If I adjust the size of a button in the theme, like this:
const theme = createMuiTheme({
overrides: {
MuiButton: {
fab: {
width: 36,
height: 36,
},
},
MuiSvgIcon: {
root: {
width: 16,
},
},
},
};
Then the button and the icon appear at the size I want. However this affects all icons, whether they're inside a button or not!
How can I say that I only want the MuiSvgIcon properties to apply when the element is found inside a MuiButton element?
Well I've worked out one way to do it, but it's not ideal because it relies on the internal structure of the MuiSvgIcon. But it might serve as a starting point for someone else. Better answers are most welcome.
const theme = createMuiTheme({
overrides: {
MuiButton: {
fab: {
width: 36,
height: 36,
'& svg': {
width: 16,
},
},
},
},
};
It works by applying a style to the <svg> DOM element inside the JSX <Button variant="fab"> element.
It's not documented anywhere unfortunately, but you can use any sort of CSS selectors to help. Use the "attribute contains" pattern with the class attribute itself to target descendants:
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
// Targets MuiSvgIcon elements that appear as descendants of MuiButton
'& [class*="MuiSvgIcon-root"]': {
width: 16
}
},
},
},
};
Note 1: Caution! Material UI minifies these classnames in prod builds by default. If you want to preserve these classnames for prod, you will need to tweak the class generator function: https://material-ui.com/customization/css-in-js/ (see dangerouslyUseGlobalCSS)
Note 2: with this pattern, occasionally you end having to use !important if there's already a competing inline style that you want to override. If you're using styled-components, you can increase the specificity by using && (see the Material UI docs).