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
}
}
}
}
});
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' },
},
};
};
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.
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'
},
}
}
}
};
i am trying to edit the background colour of my chart however it isnt working i can only edit the background colour of the full thing not the chart area, my code is below
var sessions = {
query: {
dimensions: 'ga:date',
metrics: 'ga:sessions'
},
chart: {
type: 'LINE',
options: {
width: '100%',
title: 'Sessions',
titleTextStyle: {
color: '#0f55c4',
fontSize: '16',
bold: true
}
}
}
};
I have tried all the following combinations none have worked;
backgroundColor: 'red', (changed background colour not chart colour)
chartArea: {
backgroundColor:'red'
} (again background colour only)
chartArea: {
backgroundColor: {
fill: 'red'
}
} (again background colour only)
chartArea: {
fill: 'red'
} (doesn't work)
Not to sure what else i can try I've tried everything i can find in the documentation and several sites nothing seams to work it just goes onto the whole background not just the chart area, any help is greatly appreciated.
Thanks.
According to the documentation you're able to change the background color and the backgroundcolor of the chartArea.
I'm able to change both of these colors with the following option:
var options = {
backgroundColor: '#ccc',
chartArea: {
backgroundColor:'#e5e5e5'
}
};
Fiddle.
Sadly I'm not familiar with the way you have arranged your options and such, but my guess would be that you should place this option within
options: {
width: '100%',
.....
chartArea: {
backgroundColor:'#e5e5e5'
}
.......
};
I hope this helps you out!