I'm creating a theme for an app with createMuiTheme. I'm using material-table and I need to target to this icon of the column table header that is currently sorted:
Watching in developer tools it has the following CSS selectors:
.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon {
color: rgba(0, 0, 0, 0.54);
opacity: 1;
}
How can i do that in the createMuiTheme object from this?
const theme = createMuiTheme({
overrides : {
MuiTableSortLabel: {
root: {
//i want to modify the icon color
color: blue
}
}
}
})
When you are uncertain how to override the default styles, the best resource is to look at how the default styles are defined. The browser developer tools will show you the end result, and the source code will show you the approach to use to generate CSS with similar specificity.
Below is the relevant code from TableSortLabel that controls the icon color:
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
'&$active': {
// && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
'&& $icon': {
opacity: 1,
color: theme.palette.text.secondary,
},
},
}
});
You can use very similar syntax for the theme override:
const theme = createMuiTheme({
overrides: {
MuiTableSortLabel: {
root: {
"&$active": {
"&& $icon": {
color: "blue"
}
}
}
}
}
});
Relevant JSS Documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
Related
I'm creating a style to use within a Button, but I'm unsure on how to select a nested style from my theme. Here is my style and theme:
const buttonStyle: SxProps<Theme> = {
'&:hover': {
backgroundColor: 'backgroundAlert', // workaround
},
};
export const darkTheme = createTheme(themeOptions, {
palette: {
mode: 'dark',
background: {
default: '#0B0E16',
paper: '#1D1F2B',
alert: '#373B38' // I want to use this property
},
backgroundAlert: '#373B38', // workaround
},
});
I'm using backgroundAlert as a work around because i don't know how to select alert from background.alert since it's nested. I couldnt find anything in the docs - does anyone know the syntax to do this?
Something like the below worked for me.
import { styled } from '#mui/material/styles';
const ButtonStyle = styled(Button)(({ theme }) => ({
'&:hover': {
backgroundColor: darkTheme.palette.background.alert,
},
}));
<ButtonStyle variant="contained">Your Button</ButtonStyle>
I need to use Switch component from MUI v5 in a website with third party CSS that apply relative position to checkboxes and radios.
In v4 I was able to change this behaviour with an override:
overrides: {
MuiSwitch: {
input: { position: 'absolute !important' },
}
}
This was enough to set position to absolute.
Following the example provided by official documentation in order to migrate to v5 I changed the above snippet in:
components:{
MuiSwitch: {
styleOverrides: {
input: {
position: "absolute !important"
}
}
}
}
But MuiSwitch-input still has position relative.
Please take a look at this demo.
The only solution I found was to put style in CSS:
.MuiSwitch-input {
position: absolute !important;
}
I'm not sure why your code didn't work, but I've found a workaround by specifying the switch input className directly like this:
import Switch, { switchClasses } from "#mui/material/Switch";
import { createTheme, ThemeProvider } from "#mui/material/styles";
const theme = createTheme({
components: {
MuiSwitch: {
styleOverrides: {
root: {
[`& .${switchClasses.input}`]: {
position: "absolute"
}
},
switchBase: {
color: "red"
}
}
}
}
});
Live Demo
I'm currently customizing a few components using global theme overrides in the hopes of maintaining as much of the integrity of the Material-UI theming engine as possible. I know I could accomplish what I'm trying to do using composition, but I want to see if it's possible to achieve this via overrides.
The Goal
Change the background color of the BottomNavigation component to use the primary color of the current theme, and ensure the label gets a color that is legible on top of that background color.
My Current Approach
const theme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,102,102,1)'
}
},
overrides: {
MuiBottomNavigation: {
root: {
backgroundColor: 'rgba(217,102,102,1)'
}
},
MuiBottomNavigationAction: {
wrapper: {
color: '#fff'
}
}
}
});
This code accomplishes the task and turns the bottom navigation red and the label/icons white. However, I want the flexibility of being able to change the primary color in the palette and have the component update accordingly.
What I'm Trying To Do
const theme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,102,102,1)'
}
},
overrides: {
MuiBottomNavigation: {
root: {
backgroundColor: 'primary.main'
}
},
MuiBottomNavigationAction: {
wrapper: {
color: 'primary.contrastText'
}
}
}
});
In this way I could easily update the primary color and not have to worry about changing every reference to it across my overrides. I realize I could extract the rgba value out into a const and that would accomplish part of my goal, but I don't see how I could access something as useful as contrastText in case I choose a much lighter primary color.
So - does anyone know of a way to reference theme palette colors in a theme override definition? Any help would be greatly appreciated!
There's another approach here. createMuiTheme accepts any number of additional theme objects to be merged together.
With that in mind you could replicate your accepted answer without having two different ThemeProvider. And if you move the theme definition to its own module, it won't be recreated on each render.
import { createMuiTheme } from "#material-ui/core/styles";
const globalTheme = createMuiTheme({
palette: {
primary: {
main: "rgba(217,255,102,1)"
}
}
});
const theme = createMuiTheme(
{
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main
},
label: {
color: globalTheme.palette.primary.contrastText
}
}
}
},
globalTheme
);
export default theme;
I updated the CodeSandBox to reflect this.
Ill provide two solutions- one is more readable and maintainable, and one has better performance.
The readable and maintainable approach:
Create nested themes.
One theme will be for defining the palette, and one theme will be for overrides.
Because its two themes, you can access the palette theme from overrides theme:
const globalTheme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,255,102,1)'
}
},
});
const overridesTheme = createMuiTheme({
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main,
},
label: {
color:globalTheme.palette.primary.contrastText,
}
},
}
})
You can refer to this CodeSandbox
This approach doesn't have good performance, bacause every render a new CSS object will be computed and injected
The better performance approach:
First you create an Mui theme skeleton, with the palette.
After it has been created, you add the styles that rely on the palette (notice how I have to use the spread operator a lot to avoid deleting styles):
const theme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,255,102,1)'
}
},
})
theme.overrides = {
...theme.overrides,
MuiButton: {
...theme.MuiButton,
root: {
...theme.root,
backgroundColor: theme.palette.primary.main,
},
label: {
...theme.label,
color:theme.palette.primary.contrastText,
}
},
}
You can refer to this CodeSandbox
There's a new way to do it in MUI v5 that is much more straightforward. Suppose you want to override the background color of an Mui Button. Inside the custom theme object, you specify this:
const customTheme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
backgroundColor: 'red',
},
},
},
},
});
This is the usual case for hard coding a value. Now, if you wanted to use some property like the primary color from the custom theme you just made, you can pass an arrow function to the root(or whatever component you need to override) with an object as the argument, and return an object containing the styles you need. You can access the theme inside the returned object.
const customTheme = createTheme({
palette: {
primary: {
main: '#002255',
},
},
components: {
MuiButton: {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.primary.main,
}),
},
},
});
As you can see, inside the object you can destructure the theme. Similarly you can destructure ownerState, which contains all the props and state of the component, which you can access using dot operator.
To illustrate, I have declared a prop called dark on an Mui Button Component
<Button dark={true}>Random Button</Button>
Now I can access this prop in the button, using the object destructuring
const customTheme = createTheme({
palette: {
primary: {
main: '#002255',
},
},
components: {
MuiButton: {
styleOverrides: {
root: ({ ownerState, theme }) => ({
backgroundColor: ownerState.dark
? theme.palette.primary.dark
: theme.palette.primary.light,
}),
},
},
});
For people looking at this for answers on theming and switching between themes.
https://codesandbox.io/s/material-theme-switching-with-pallete-colors-vfdhn
Create two Theme objects and switch between them. Use the same theme property between them so all your overrides can use the same palette to ensure things are not repeated and we use the overrides completely.
import { createMuiTheme } from "#material-ui/core/styles";
let globalTheme = createMuiTheme({
palette: {
primary: {
main: "#fa4616"
}
}
});
export const LightTheme = createMuiTheme(
{
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main
},
label: {
color: globalTheme.palette.primary.contrastText
}
}
}
},
globalTheme
);
globalTheme = createMuiTheme({
palette: {
primary: {
main: "#0067df"
}
}
});
export const DarkTheme = createMuiTheme(
{
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main
},
label: {
color: globalTheme.palette.primary.contrastText
}
}
}
},
globalTheme
);
By default z-index is set to 1300
doing something like:
[class*='MuiModal-root'] {
z-index: 2000!important;
}
works but is there a better way?
Create a Theme if you don't have one Material-UI themes docs and override the z-index like so:
export const theme = createMuiTheme({
overrides: {
MuiModal:{
root: {
zIndex: 2000,
}
}
}
});
I'm having a problem with changing button text color directly in the MUI theme. Changing primary color + button font size works fine, so the problem isn't in passing the theme on. Here's my code:
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { lightBlue } from 'material-ui/colors';
import styled from 'styled-components';
const theme = createMuiTheme({
palette: {
primary: lightBlue, // works
},
raisedButton: {
color: '#ffffff', // doesn't work
},
typography: {
button: {
fontSize: 20, // works
color: '#ffffff' // doesn't work
}
}
});
const App = ({ user, pathname, onToggleDrawer }) => (
<MuiThemeProvider theme={theme}>
...
</MuiThemeProvider>
);
I also tried using an imported color instead of the #ffffff, but that had no effect either.
Anybody got any ideas?
This worked for me. The color we chose decided to have a dark button contrast color but white as contrast color looks arguably better:
const theme = createMuiTheme({
palette: {
primary: {
main: "#46AD8D",
contrastText: "#fff" //button text white instead of black
},
background: {
default: "#394764"
}
}
});
Solved it! This finally did the trick:
const theme = createMuiTheme({
palette: {
primary: lightBlue,
},
overrides: {
MuiButton: {
raisedPrimary: {
color: 'white',
},
},
}
});
So, you just have to use "overrides" and be explicit about the exact type of component you want to change.
When you set a color in your Button (e.g. <Button color='primary'), how the text color is applied depend on the variant of the Button:
text | outlined: Use the main color (e.g. primary.main) as the text color.
contained: Use the contrastText color as the text color and main color as the background color.
import { blue, yellow } from '#mui/material/colors';
import { createTheme, ThemeProvider } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: blue[500],
contrastText: yellow[500],
},
},
});
Live Demo
Related Answer
Change primary and secondary colors in MUI
This solution works for me
const theme = createMuiTheme({
overrides: {
MuiButton: {
label: {
color: "#f1f1f1",
},
},
},
This worked for me, e.g. for custom success and error colors:
// themes.ts
import { createTheme, responsiveFontSizes } from '#mui/material/styles';
// Create a theme instance.
let theme = createTheme({
palette: {
primary: {
main: '#F5F5F5', // Used elsewhere
},
success: {
main: '#11C6A9', // custom button color (seafoam green)
contrastText: '#ffffff', // custom button text (white)
},
error: {
main: '#C6112E', // custom button color (red)
},
},
});
theme = responsiveFontSizes(theme);
export default theme;
Then in your .jsx/.tsx just declare the Button color.
Success button:
<Button
variant="contained"
color="success"
>
Success button text
</Button>
And for the red button w/ outline:
<Button
variant="outlined"
color="error">
Danger button text
</Button>
From https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js#L200 you can see what can be set in the theme for various components, and on raisedButton you will see that color is the actually the button background and to set the text colour you will need to change textColor property instead.
const theme = getMuiTheme({
raisedButton: {
textColor: '#ffffff', // this should work
primaryTextColor: '#ffffff' // or this if using `primary` style
}
});
Its not exactly intuitive given that CSS color affects text rather than background, and it doesn't even match up with the properties for the component itself http://www.material-ui.com/#/components/raised-button which have props for backgroundColor and labelColor instead!!!