I'm creating a custom theme with mui as follows:
export default createMuiTheme({
breakpoints: {
keys: [
"xxs",
"xs",
"sm",
"md",
"lg",
"xl",
],
values: {
xxs: 0,
xs: 414, // iPhone X and below in portrait mode
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
},
})
But when I try to use it in a class declaration like so:
const styles = theme => ({
root: {
[theme.breakpoints.down('xxs')]: {
textAlign: "center",
padding: theme.spacing.unit * 2,
},
},
})
I get the following CSS:
#media (max-width:NaNpx) {
.root-3 {
padding: 16px;
text-align: center;
}
}
Is there a special way to add a custom breakpoint vs. just modifying existing ones?
Currently it is only possible to customize the values of the predefined breakpoints. Here is an example:
const theme = createMuiTheme({
breakpoints: {
values: {
xs: 0,
sm: 450,
md: 600,
lg: 900,
xl: 1200
}
}
});
The breakpoint names cannot be configured. There is a comment in createBreakpoints.js explaining this:
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
export const keys = ['xs', 'sm', 'md', 'lg', 'xl'];
UPDATE (September 2018):
This feature has been requested and is currently under discussion. See material-ui/issues/11649
In case you prefer not to change the default values,
You can use a quick workaround,
use the theme breakpoints field to change the breakpoint value where needed.
For example:
xxl breakpoint
[theme.breakpoints.up(theme.breakpoints.values.xl + CUSTOM_BREAKPOINT_DIFFERENCE)]: {
padding: "0 3.5rem",
},
Related
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1230,
xl: 1536,
},
I
want to add some extra pixel in Large breakpoint
import { createTheme } from '#material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1230,
xl:1536,
},
},
});
I have try to override the lg pixel but its not working.
How to reduce so many breakpoints? I need a card height for all responsive views.
Using xs, sx, md, lg & xl so many height spaces. But I can't achieve it using this xs,sx,md,lg &xl.So I used MUI breakpoints between & size.
MUI has a customisable theme now (including breakpoints) for react.js see documentation on creating your own breakpoints:
https://mui.com/material-ui/customization/breakpoints/#custom-breakpoints
You could change them from this...
const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1536,
},
},
});
To this:
const theme = createTheme({
breakpoints: {
values: {
mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1200,
},
},
});
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'm trying to get my head around using the createMuiTheme and adjust the maxWidth for the different breakpoints I have created. For now I have made the following breakpoint values:
import { Container as Container_, Grid } from '#material-ui/core'
import { MuiThemeProvider, createMuiTheme } from "#material-ui/core/styles"
const breakPointValues = {
xs: 0,
sm: 768,
md: 1025,
lg: 1280,
xl: 1360,
}
Then I create a theme with these breakpoints.
const theme = createMuiTheme({
breakpoints: { values: breakPointValues },
overrides: ({
MuiContainer: ({
root: {
},
maxWidthXl: //????
})
})
})
I need to adjust the maxWidth to something else than the standard that is giving. For example I need to set maxWidth for every viewport larger than 1279px --> so for large and xlarge.
It should be possible using the maxWidthXl, but can't find an example how to write the code, as the type is something else than a string.
I'm using typescript btw, and the error I'm getting looks like this.
Type 'string' is not assignable to type 'CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)'.
I have searched and found that I maybe should be using the createStyles from #material-ui/core/styles, but can't find any example in the documentation how this should be.
Rest of code:
const Container = (props: Props) => {
return (
<MuiThemeProvider theme={theme}>
<ContainerStyled fluid={props.fluid} {...props.fluid ? { maxWidth: false } : { fixed: false }}>
<Grid container spacing={6}>
{props.children}
</Grid>
</ContainerStyled>
</MuiThemeProvider>
)
}
export default Container
Just dealt with this issue, myself. The following worked:
import { createMuiTheme } from '#material-ui/core/styles/';
export default createMuiTheme({
overrides: {
MuiContainer: {
maxWidthXs: {
maxWidth: '300px !important'
},
maxWidthSm: {
maxWidth: '600px !important'
},
maxWidthMd: {
maxWidth: '900px !important'
},
maxWidthLg: {
maxWidth: '1200px !important'
},
maxWidthXl: {
maxWidth: '1500px !important'
},
maxWidthXxl: {
maxWidth: '1920px !important'
}
}
}
});
Edit: This can also be done without overrides, using the following, but it will override default Theme values for all the components, not just the Container:
import { createMuiTheme } from '#material-ui/core/styles/';
export default createMuiTheme({
breakpoints: {
keys: {
0: 'xs',
1: 'sm',
2: 'md',
3: 'lg',
4: 'xl',
5: 'full'
},
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1500,
full: window.innerWidth
}
}
});
Maybe not the right approach but I want to create some 'global' styles for headings for example. Something like this:
const myTheme = createMuiTheme({
headings: {
h1: {
fontSize: 28,
// Obviously this does not work...
[theme.breakpoints.down('sm')]: {
fontSize: 24
},
},
h2: {
fontSize: 24,
}
}
}
then I can use them in my components like this:
const styles = (theme) => ({
myElement: {
...theme.headings.h1,
// ... other styles
}
}
This does work but the issue I face is I want the headings to be responsive and respect Material UI's breakpoints, but I can't use them inside the createMuiTheme itself? What is the way to do this correctly so I can just spread in my styles that INCLUDE the responsive styles all in one?
You can use the createBreakpoints method
Example:
// theme.js
import createBreakpoints from '#material-ui/core/styles/createBreakpoints'
import { createMuiTheme } from '#material-ui/core/styles'
const breakpoints = createBreakpoints({})
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
[breakpoints.up('md')]: {
minWidth: '200px',
backgroundColor: 'yellow',
},
},
},
},
})
export default theme
(tested: material-ui 4.0.1)
V5 update
Preferred solution is to create an intermediate theme (source):
let theme = createTheme()
theme = createTheme(theme , {
h5: {
fontSize: "1.5", //24px
fontWeight: title.fontWeight,
fontFamily: sansSerif(title.fontFamily),
letterSpacing: title.letterSpacing,
lineHeight: "2.1rem", //34px
color: "#636e72",
[theme.breakpoints.between("xs", "sm")]: {
fontSize: "1.25rem", // 20px
lineHeight: "1.9rem", // 30px
},
[theme.breakpoints.between("sm", "md")]: {
fontSize: "1.4rem", //24px
lineHeight: "2rem", // 35px
},
},
})
If you used createBreakpoints: as pointed out by #Ricardo Canelas comment, createBreakpoints has simply moved, right import is now: import createBreakpoints from "#mui/system/createTheme/createBreakpoints". However, keep in mind that this is still a private API at the time of writing so can move/break at any version update.
Preferred solution is to use an intermediate theme.
From https://github.com/mui-org/material-ui/issues/18017#issuecomment-545914925
import { createMuiTheme } from "#material-ui/core/styles";
const theme = createMuiTheme();
theme.overrides = {
MuiTypography: {
hero: {
[theme.breakpoints.up('md')]:{
fontSize: '11rem',
background: 'red',
},
fontSize: '3.75rem',
lineHeight: '5rem',
fontWeight: 700,
},
},
};
This is a side note, but if you want to change the values of the breakpoints you can edit the breakpoints object created with createBreakpoints({}):
import createBreakpoints from '#material-ui/core/styles/createBreakpoints'
const breakpoints = createBreakpoints({})
// outputs {xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920}
breakpoints.values.lg = 1024
// outputs {xs: 0, sm: 600, md: 960, lg: 1024, xl: 1920}
You could also add additional breakpoints in a similar way if you didn't want to edit the existing items:
breakpoints.values['xxl'] = 3000
// outputs {xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920, xxl: 3000}
In my project the breakpoints that Material-UI has set (xs: 0, sm: 600, etc.) didn't line up with the ones I was using already in my project, so I had to change them.
const theme = createMuiTheme();
theme.typography.h3 = {
fontSize: '1.2rem',
'#media (min-width:600px)': {
fontSize: '1.5rem',
},
[theme.breakpoints.up('md')]: {
fontSize: '2.4rem',
},
};
https://material-ui.com/customization/typography/#responsive-font-sizes
You can also use something like this -
MuiInputBase: {
defaultProps: {
sx: {
fontSize: {
xs: '16px',
md: '14px',
},
},
},
},