I'm using material-ui v.1 library for React, and want to set background of Paper components.
I want to do that using themes.
I'm using top level
const theme = createMuiTheme({
palette: {
//type: 'light'
}
});
<MuiThemeProvider theme={theme}>
</MuiThemeProvider>
What should I put in createMuiTheme to do that?
I've tried several options (like palette:{paper: {backgroundColor: 'black'}}, and paper: {backgroundColor: 'black'}, and backgroundColor: {paper: 'black'}) but nothing works.
NOTE: type: 'light', type: 'dark' works fine.
According to https://material-ui-next.com/customization/themes/, the following property should be used :
const theme = createMuiTheme({
palette: {
background: {
paper: 'red'
}
}
});
If you take a look at the themes documentation you will see:
{
"palette": {
"shades": {
"light": {
"background": {
"paper": "#fff",
},
},
},
},
}
Related
I have a MUI theme setup and I would like to add an alpha color to MuiChip. I am not sure on how to access the specific color inside createTheme. For example, if my primaryColor is '#FF0000' and the secondary color is '#00ff00', just for MuiChip, I want to do backgroundColor: alpha(theme.palette, 0.1); If I pass a variant prop for the chip component, the backgroundColor should be changed to the alpha version of that variant.
export const theme = createTheme({
palette: {
primary: {
main: colors.primary,
},
secondary: {
main: colors.secondary,
},
error: {
main: colors.red,
},
},
components: {
MuiChip: {
styleOverrides: {
colorPrimary: {
color: 'white',
},
root: {
backgroundColor: alpha(theme.palette, 0.1)
}
},
},
},
});
Please advice.
As I can see your theme you misunderstood how MUI works with themes. I see this main problems:
If you use just MUI colors.primary is not valid. You must use exact color code like #fff. (not true if you use some kind of color lib)
in styleOverrides you must use the template from the doc here. With this you will get theme and ownerState to manipulate components on CSS level.
theme.palette is not the exact color reference you should use theme.palette.primary.main in alpha()
You can use alpha but I think opacity is easier
Just for information for other readers here we can find CSS reference of Chip component for Rule Names to override.
I made a working code on Codesandbox, you can try it.
Here is my theme to solve the problem:
export const theme = createTheme({
palette: {
primary: {
main: "#a0a"
},
secondary: {
main: "#0a0"
},
error: {
main: "#a00"
}
},
components: {
MuiChip: {
styleOverrides: {
root: {
color: "#0a0"
},
colorSuccess: ({ ownerState, theme }) => ({
...(ownerState.variant === "custom" && {
backgroundColor: alpha(theme.palette.primary.main, 0.3)
})
})
}
}
}
});
I am trying to disable the ripple on buttons in Material UI v5 because my product does not need it. According to the Material UI docs, all I have to do is this:
import { createTheme } from '#mui/material';
const theme = createTheme({
components: {
// Name of the component ⚛️
MuiButtonBase: {
defaultProps: {
// The props to apply
disableRipple: true, // No more ripple, on the whole application 💣!
},
},
},
});
So I do that to my own theme, which is here:
import { createTheme } from '#mui/material/styles';
const theme = createTheme({
components: {
MuiButtonBase: {
defaultProps: {
disableRipple: true,
},
},
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
borderRadius: "40px",
fontSize: "1.1875rem"
},
},
},
},
});
export default theme;
The style overrides work fine. But the disableRipple does not work. It still ripples. I tried applying to the default props of MuiButton as well. No luck.
I am using typescript, but this is not returning any errors.
Can anyone help me out here?
I know the basics with MUI's createTheme and changing component defaults like Typography, but how do I select classNames? In my situation, I want to only create themes for specific Typography/Grids in tandem with breakpoints, but there's no clear example of changing target components in the docs. Here's what I have so far:
let theme = createTheme({
typography: {
fontFamily: "Inter, sans-serif",
color: "#212b37",
h5: {
fontSize: 40,
},
body: {
fontSize: 18,
},
},
root: {
sample_class: {
fontSize: 40,
}
}
});
I saw the docs mentioned root so I just winged it and added sample_class thinking that'll select the element with the same className.
Just for reference, I'm using MUI version ^5.0.0-rc.1.
Perhaps you can try something like this in createTheme:
Solution 1:
MuiTypography: {
styleOverrides: {
h6: ({ ownerState }) => (ownerState.className === "MyClass" ? { color: "red" } : {}),
},
},
where "MyClass" is the name of the class you want to apply theme stylings to.
Solution 2:
This is cleaner.
MuiTypography: {
styleOverrides: {
h6: {
'&.MyClass': { color: 'red' },
},
},
},
Then you can do this with your Typography element:
<Typography variant="h6" className="MyClass">Hello world</Typography>
If you have VS Code, you can Command+Click until you get to the TypographyClasses interface, which gives you a full list of typography classes to override.
Here are some links of ownerState which can help on component overriding:
https://mui.com/customization/theme-components/
https://mui.com/customization/unstyled-components/
This was also my solution for trying to style another component, such as the MuiAccordion, but I didn't want to override the existing variants since they had their own default styles.
I've been using this Material-UI Theme Creator tool to put together a MUI theme that I like:
mui-theme-creator
This tool is using Material UI version 4 I believe, while in my project I'm using #mui/material version 5.2.1, and I'm trying to figure out how I can "convert" the code from the theme-creator to a version compatible with version 5.
Now, here's the theme code from the Theme Creator:
import { ThemeOptions } from '#material-ui/core/styles/createMuiTheme'
export const themeOptions: ThemeOptions = {
palette: {
type: 'dark',
primary: {
main: '#ff3d00',
},
secondary: {
main: '#2962ff',
},
...........
props: { // Is there a way to do anything like this with Mui v5?
MuiAppBar: {
color: 'inherit',
},
},
overrides: {
MuiAppBar: {
colorInherit: {
backgroundColor: '#303030',
color: '#fff',
},
},
},
};
Screenshot of the AppBar using the above ThemeOptions code
Now, while I've done my best to try and convert this code to v5 and replicate it's effects, I'm having one main issue. This is the relevant code I've got so far:
import { createTheme } from '#mui/material/styles'
export const theme = createTheme({
mode: 'dark',
palette: {
primary: {
main: '#ff3d00',
},
secondary: {
main: '#2962ff',
},
..............
components: {
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: '#303030',
color: '#ffffff',
},
},
},
},
})
The main issue I'm having is that, while the AppBar does change it's background color, I can't seem to find an option using createTheme that will change the color of the child elements inside the AppBar.
If there's no way to do it like in version 4 would it best if I just create a theme based on the main theme I've already created and use it solely for theming my Navbar component?
Your migrated style is missing props, In MUI5 you have to provide props like this
components: {
MuiAppBar: {
styleOverrides: {
colorInherit: {
backgroundColor: "#32302F",
},
},
defaultProps: {
color: "inherit",
},
},
},
I want to use fontweight 300 globally in my Material UI React project, however the default setting is 400. I only figured out how to override fontWeight on a specific component (like h3 in the code below), so i ask for help in setting it globally for all Material UI Components that i will be using in the future.
overrides: {
MuiTypography: {
h3: {
fontWeight: 300
}},
MuiTableCell:{
root:{
fontWeight: 200
}
},
},
In the code example below i change FontFamily and borderRadius for all components at the same time using createMuiTheme, but i don't know how to set FontWeight to all Material UI components at the same time.
const theme = createMuiTheme({
typography: {
fontFamily: [
'Sora',
'sans-serif'
].join(','),
},
shape:{
borderRadius:12
},
tru to add "" to fontWeight
h3: {
"fontWeight": 200,
},
There is an allVariants property you can use in your theme's typography configuration:
import { createTheme } from "#mui/material/styles";
// Create a theme instance.
const theme = createTheme({
typography: {
allVariants: {
fontWeight: 300,
},
},
});
export default theme;