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.
Related
I'm trying to create a variant to scale the fontSize of Heading in NativeBase.
The following does not work.
const theme = extendTheme({
components: {
Heading: {
variants: {
h2: {
fontSize: {
base: 'xs',
sm: 'xs',
md: 'sm',
lg: 'sm',
xl: 'md',
},
},
},
},
},
});
Nothing changes in...
<Heading variant="h2">Some Header Text</Heading>
What is the correct way to make a scalable Heading component?
So here, Variant will be resolved first and then sizes will be resolved. So fontSize from size will override fontSize from variant. You can follow the below approach to apply size to your heading.
export const Example = () => {
const theme = extendTheme({
components: {
Heading: {
sizes: {
myCustomSize: {
fontSize: { base: 'lg', md: '2xl', lg: '3xl' },
},
},
defaultProps: {
size: 'myCustomSize',
},
variants: {
h1: {
_light: {
color: 'red.500',
},
_dark: {
color: 'amber.500',
},
},
},
},
},
});
#Ankit-Taylor gets all the credit for his answer. But, I also wanted to explain exactly how I implemented his advice.
The following allows for <Heading> to scale across screen sizes and easily allows us to make smaller headers by doing <Heading size="h2"> or <Heading size="h3"> (which also scale across screen sizes).
export const Example = () => {
const theme = extendTheme({
components: {
Heading: {
defaultProps: {
size: 'h1',
},
sizes: {
h1: {
fontSize: {
base: 'lg',
sm: 'xl',
md: '2xl',
lg: '3xl',
xl: '4xl',
},
},
h2: {
fontSize: {
base: 'md',
sm: 'lg',
md: 'xl',
lg: '2xl',
xl: '3xl',
},
},
h3: {
fontSize: {
base: 'sm',
sm: 'md',
md: 'lg',
lg: 'xl',
xl: '2xl',
},
},
},
},
},
});
};
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,
},
},
});
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',
},
},
},
},
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",
},