I'm writing a React application using Material UI. I have the following global theme file:
import { createMuiTheme } from '#material-ui/core/styles';
import createBreakepoints from '#material-ui/core/styles/createBreakpoints';
import '../../index.css';
const font = "'Ubuntu', sans-serif";
const breakpoints = createBreakepoints({});
const theme = createMuiTheme({
palette: {
primary: {
main: '#3a2d96',
},
secondary: {
main: '#ff7b7d',
},
text: {
primary: 'white',
secondary: 'black',
},
grey: {
A100: '#988d8b',
A200: '#3f3f46',
},
},
typography: {
fontFamily: font,
[breakpoints.up('md')]: {
fontSize: 6,
},
[breakpoints.up('sm')]: {
fontSize: 4,
},
},
});
export default theme;
The breakpoints aren't applied.
I'm trying to change the fontSize property on the global theme file so that any typography component in my app will have this rule.
Related
I have an issue when I try to customise both the overall theme styling and the component styling at once in Material UI.
I started with the below which works perfectly:
import { createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
brand: '#0D3B66',
primary: {
main: '#4AA1FF',
},
},
typography: {
// Changes to default 'typography'.
fontFamily: '"Mukta", sans-serif',
fontWeight: 400,
h1: {
fontSize: 24,
},
}
})
export default theme
Then I wanted to add the following override as well to change theme breakpoint. (This also works perfectly alone).
However, when I combine both like this:
import { createTheme } from '#mui/material/styles';
let theme = createTheme({});
theme = createTheme(theme, {
components: {
MuiContainer: {
styleOverrides: {
maxWidthLg: {
[theme.breakpoints.up('lg')]: {
maxWidth: 1280 // Your custom value here
},
}
}
}
}
})
export default theme
Hence, I tried to combine these to form this final block:
import { createTheme } from '#mui/material/styles';
let theme = createTheme({});
theme = createTheme(theme, {
components: {
MuiContainer: {
styleOverrides: {
maxWidthLg: {
[theme.breakpoints.up('lg')]: {
maxWidth: 1280 // Your custom value here
},
}
}
}
},
palette: {
brand: '#0D3B66',
primary: {
main: '#4AA1FF',
},
},
typography: {
// Changes to default 'typography'.
fontFamily: '"Mukta", sans-serif',
fontWeight: 400,
h1: {
fontSize: 24,
},
}
})
export default theme
...I no longer see the palette changes take effect when combined... Maybe palette and typography need to be handled separately or on a different level?
I'm not sure how to do this, so any advice appreciated!
This code works perfect for me:
import React from 'react';
import './App.css';
import { createTheme, ThemeProvider } from '#mui/material/styles';
import { Button, Container } from '#mui/material';
let theme = createTheme({});
theme = createTheme(theme, {
components: {
MuiContainer: {
styleOverrides: {
maxWidthLg: {
[theme.breakpoints.up('lg')]: {
maxWidth: 1280
},
}
}
}
},
palette: {
brand: '#0D3B66',
primary: {
main: '#4caf50',
},
},
typography: {
fontFamily: '"Mukta", sans-serif',
fontWeight: 400,
h1: {
fontSize: 24,
},
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<Container>
<Button>Primary</Button>
</Container>
</ThemeProvider>
);
}
export default App;
You can see the result:
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'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'm wanting to use material UI for a project. I see in the documentation that is possible to add a custom theme to change the colours of primary, secondary, etc.
Is it possible to do the same thing for other colours? For example, is it possible to create a theme for the grays used by material UI, without having to manually write custom css for each component?
you change it on theme file :
import { red } from '#material-ui/core/colors';
import { createTheme } from '#material-ui/core/styles';
// A custom theme for this app
const theme = createTheme({
overrides: {
MuiFormLabel: {
asterisk: {
color: '#db3131',
'&$error': {
color: '#db3131'
},
'&$warning': {
color: '#db3131'
},
}
}
},
colorMenu:'#fff',
palette: {
primary: {
main: '#009788',
},
gray: {
main: '#B1B6C0',
},
action: {
main: '#daa081',
},
secondary: {
main: '#db3131',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
});
export default theme;
I am doing something like this.
// theme.js
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
MuiToolbar: {
gutters: {
[theme.breakpoints.up('sm')]: {
paddingLeft: '16px',
paddingRight: '16px',
},
},
},
},
palette: {
type: 'dark',
},
});
export default theme;
Error message: TypeError: Cannot read property 'breakpoints' of undefined.
I wanna get the theme style value and use for overwrite, how can i fixed this error.
24px gutter is too much for me for all theme style / components like paper, how can i easy to overwrite all gutter with 16px replace?
Thanks so much.
As answered in this question, you need to create an instance of the default theme, so you have an object to get breakpoints from:
import { createMuiTheme } from '#material-ui/core/styles';
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
overrides: {
MuiToolbar: {
gutters: {
[defaultTheme.breakpoints.up('sm')]: {
paddingLeft: '16px',
paddingRight: '16px',
},
},
},
},
palette: {
type: 'dark',
},
});
export default theme;
Regarding the "global" gutter property, Toolbar uses theme.mixins.gutters() to get the default gutter, so I think you have to override that. Looking into this function source, this should be the right override to set the gutter to 16px:
import { createMuiTheme } from '#material-ui/core/styles';
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
mixins: {
gutters: (styles = {}) => ({
paddingLeft: defaultTheme.spacing.unit * 2,
paddingRight: defaultTheme.spacing.unit * 2,
...styles,
[defaultTheme.breakpoints.up('sm')]: {
paddingLeft: defaultTheme.spacing.unit * 2,
paddingRight: defaultTheme.spacing.unit * 2,
...styles[defaultTheme.breakpoints.up('sm')],
},
}),
},
palette: {
type: 'dark',
},
});
export default theme;