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;
Related
Having trouble accessing my custom Material UI palette for some reason. I have created a custom theme in Theme.js like so:
import { createTheme, ThemeProvider } from "#mui/material/styles";
import { NextRequest } from "next/server";
import Inter from "typeface-inter";
const theme = createTheme({
palette: {
background: {
default: "#120C18",
},
primary: {
main: "#21172a",
},
secondary: {
main: "#33283e",
},
info: {
main: "#756c7c",
},
},
typography: {
fontFamily:
"Inter",
h1: {
font: "Inter",
fontSize: "min(3vw, 70px)",
fontWeight: "bold",
lineHeight: "1.15",
},
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 1000,
lg: 1200,
xl: 1600,
},
},
export default function Theme({ children }) {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
then I imported and wrapped App.js in and all of my overrides work fine. But for the custom palette, I can't seem to access it in the sx or style props of certain components. I am trying to use something like theme.palette.primary.main or color="primary" but can't get anything to work.
How can I use the colors from the palette in my sx or style props?
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 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'm creating Material-UI application using Next.js template. After custom font has been provided via npm/next-fonts the problem of twice font fetching is appeared.
import GilroyRegularWoff from '../assets/fonts/Gilroy-Regular.woff';
const gilroy = {
fontFamily: 'Gilroy',
fontStyle: 'normal',
fontWeight: 400,
src: `url(${GilroyRegularWoff}) format('woff'),url(${GilroyRegularTtf}) format('truetype')`,
};
// Create a theme instance.
const theme = createMuiTheme({
typography: {
fontFamily: [
'Gilroy',
].join(),
},
overrides: {
MuiCssBaseline: {
'#global': {
'#font-face': [gilroy],
},
},
},
});
The Font was downloaded twice as shown in web inspector.
Question: how to get rid of double font downloading?
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",
},
},
},
},
}