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?
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'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;
When importing theme like this (in filename.style.ts) :
import theme from 'common/theme';
I can access the different properties, like for example
theme.breakpoints.down('md')
I am trying to reference the same property inside the theme.ts file, but ofcourse.. theme. is not valid here, so i'm trying to to find a way i can re-use / reference it.
As you see on MuiTable i'm trying to access breakpoints and palette/primary.
theme.ts
import createMuiTheme from '#material-ui/core/styles/createMuiTheme';
export const MuiPaperBackgroundColor = '#f7f8f6';
export default createMuiTheme({
spacing: 8,
breakpoints: {
values: {
xs: 0, sm: 600, md: 960, lg: 1280, xl: 1650,
},
},
palette: {
primary: {
main: '#3f18aa',
extraLight: 'rgb(193, 181, 227)',
noDataColor: '#cccccc',
cardBgColor: '#ECECEC',
chartColors: [
'#E77F42',
'#F3C3A3',
],
},
overrides: {
MuiTable: {
root: {
whiteSpace: 'nowrap',
[theme.breakpoints.down('md')]: {
'& tr': {
'& td:first-child, & th:first-child': {
position: 'sticky',
left: 0,
backgroundColor: theme.palette.header.main,
color: theme.palette.primary.contrastText,
zIndex: 2,
},
},
},
},
},
},
});
Build your theme out of the individual material-ui packages. Here's how I did it:
import createMuiTheme from '#material-ui/core/styles/createMuiTheme';
import createBreakpoints from '#material-ui/core/styles/createBreakpoints';
const breakpoints = createBreakpoints({
// your settings
});
const theme = createMuiTheme({
breakpoints,
overrides: {
MuiTable: {
root: {
[breakpoints.down('md')]: {
// style
},
},
},
},
});
Ricky's solution is nice in praxis but Material warns against importing deeper than two levels (#material-ui/core/styles/foo in this case) because that is considered private and not part of any public contract. I.e., it can change any release.
It might not work with Breakpoints, but colours or fontWeights and such can be easily shared as plain constants declared before. But I am also sceptical if it's a good idea to include responsiveness in this declaration in first place.
You can attach the props after the theme is declared.
let theme = createMuiTheme({
overrides: {
MuiAppBar: {
root: {
transform: 'translateZ(0)'
}
}
},
props: {
MuiIconButton: {
disableRipple: true
}
}
});
theme = responsiveFontSizes(theme);
theme.overrides.MuiCssBaseline = {
'#global': {
'.testMe': {
color: 'red'
},
'.container-std': {
[theme.breakpoints.up('lg')]: {
maxWidth: '1200px',
marginLeft: 'auto',
marginRight: 'auto'
}
},
'.container-wide': {
margin: theme.spacing(2, 2)
}
}
};