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?
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:
Is there a way to map default typography for TextField and all my inputs via theme? I know I can do this
components: {
MuiInput: {
styleOverrides: {
root: {
fontSize: '16px',
lineHeight: '25px'
}
}
},
but I wish to find a way to map it to 'body2'
MuiInput: {
defaultProps: {
typographyProps???: {
variant: 'body2'
}
}
For using body2 font size value in another component, You need to access the theme object's typography property.
Then You will set the MUI TextFiled's font-size equal to that value from the theme object.
import { createTheme } from "#mui/material";
const theme = createTheme({});
theme!.components!.MuiTextField = {
styleOverrides: {
root: {
"& .MuiInputBase-input": {
fontSize: theme.typography.body2.fontSize, // this is the default mui body2 font-size
lineHeight: "25px", // and any other styles you want...
},
},
},
};
And You can change the body2 fontSize when defining the theme object:
const theme = createTheme({
typography: {
body2: {
fontSize: 80,
},
});
theme!.components!.MuiTextField = {
styleOverrides: {
root: {
"& .MuiInputBase-input": {
fontSize: theme.typography.body2.fontSize, // this will be 80px
lineHeight: "25px", // and any other styles you want...
},
},
},
};
EDIT:
If You are not ok with overriding the theme after defining it, You can use this approach:
import { createTheme } from "#mui/material";
const myBody2FontSize = 20px;
const theme = createTheme({
typography: {
body2: {
fontSize: myBody2FontSize,
},
},
components: {
MuiTextField: {
styleOverrides: {
root: {
"& .MuiInputBase-input": {
fontSize: myBody2FontSize , // this is the default mui body2 font-size
lineHeight: "25px", // and any other styles you want...
},
},
},
},
},
});
You could try setting it via classname. Its a bit awkward because an input doesnt actually use Typography internally.
MuiInput: {
defaultProps: {
className: 'MuiTypography-body2'
}
}
Or possibly
MuiTextField: {
defaultProps: {
InputProps: {className: 'MuiTypography-body2' }
}
}
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.
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)
}
}
};
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;