View changelog with demos on Mantine website
Breaking changes
- Mantine was migrated to emotion from react-jss and no longer supports react-jss
@mantine/core
package no longer exports react-jsstheming
context, use createStyles instead- All components no longer support
themeOverride
prop due to performance reasons elementRef
prop was replaced withref
in all components- Default line-height (
theme.lineHeight
) was increased from 1.4 to 1.55 - Default Container sizes were changed
- Divider component no longer supports
margins
prop, usemx
ormy
instead createStyles
function now returns an object of{ classes, cx }
instead of justclasses
Migration to emotion
Mantine no longer uses react-jss, all components were migrated to emotion based css-in-js library
exposed as separate @mantine/styles
package and as a part of @mantine/core
. This means that you will have to:
- migrate all of your custom styles built with react-jss to new
createStyles
hook creator - setup new strategy for server side rendering
createStyles
Read createStyles documentation
From version 3.0 createStyles is the main way to add styles to Mantine components. Core features:
- API is similar to react-jss
- As fast and lightweight as emotion:
createStyles
extends @emotion/react - Subscribes to your Mantine theming context
- Supports all emotion features: automatic critical css extraction during server side rendering, lazy evaluation, dynamic theming, etc.
- Server side rendering support: Next.js, Gatsby or any other environment
- Fully featured TypeScript support
Basic createStyles
usage example:
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme, _params, getRef) => {
const child = getRef('child');
return {
wrapper: {
// subscribe to color scheme changes right in your styles
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
maxWidth: 400,
width: '100%',
height: 180,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: theme.radius.sm,
// Dynamic media queries, define breakpoints in theme, use anywhere
[`@media (max-width: ${theme.breakpoints.sm}px)`]: {
// Type safe child reference in nested selectors via ref
[`& .${child}`]: {
fontSize: theme.fontSizes.xs,
},
},
},
child: {
// assign ref to element
ref: child,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
padding: theme.spacing.md,
borderRadius: theme.radius.sm,
boxShadow: theme.shadows.md,
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
},
};
});
function Demo() {
const { classes } = useStyles();
return (
<div className={classes.wrapper}>
<div className={classes.child}>createStyles demo</div>
</div>
);
}
Server side rendering
Since Mantine now uses emotion instead of react-jss you will need to change server side rendering strategy.
Mantine now has 3 new packages to help you setup server side rendering:
@mantine/ssr
– general server side rendering utilities@mantine/next
– Next.js specific ssr configurationsgatsby-plugin-mantine
– enable ssr in Gatsby
Follow these guides to get started with ssr:
Ref forwarding
All components that previously used elementRef
were rebuilt with React.forwardRef
, use ref
prop to access element ref:
<TextInput ref={(node) => {}} />
Unique ids during ssr
It's no longer required to set static ids on Grid, Menu, all inputs and some other components
if you wrap your application in MantineProvider.
<TextInput /> // -> will render fine during ssr
<TextInput id="not-necessary" /> // -> id is no longer necessary
ColorSchemeProvider
ColorSchemeProvider
is a new component that will help you manage color scheme (read full docs):
import { MantineProvider, ColorSchemeProvider, ColorScheme } from '@mantine/core';
export default function Demo() {
const [colorScheme, setColorScheme] = useState('light');
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider theme={{ colorScheme }}>
<App />
</MantineProvider>
</ColorSchemeProvider>
);
}
// ...later in other component
import { ActionIcon, useMantineColorScheme } from '@mantine/core';
import { SunIcon, MoonIcon } from '@modulz/radix-icons';
function Demo() {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
return (
<ActionIcon
variant="outline"
color={dark ? 'yellow' : 'blue'}
onClick={() => toggleColorScheme()}
title="Toggle color scheme"
>
{dark ? (
<SunIcon style={{ width: 18, height: 18 }} />
) : (
<MoonIcon style={{ width: 18, height: 18 }} />
)}
</ActionIcon>
);
}
Margin props
All components now support setting following props to control margins:
m
– setsmargin
property on root elementmy
– setsmargin-top
andmargin-bottom
properties on root elementmx
– setsmargin-right
andmargin-left
properties on root elementmt
– setsmargin-top
property on root elementmb
– setsmargin-bottom
property on root elementml
– setsmargin-left
property on root elementmr
– setsmargin-right
property on root element
import { Button, TextInput } from '@mantine/core';
function Demo() {
return (
<div>
<Button mx={20}>My button</Button>
<TextInput mt="md" />
</div>
);
}
@mantine/dropzone package
@mantine/dropzone is a new package that includes Dropzone and FullScreenDropzone components.
- Dropzone component lets you capture files from user with drag 'n' drop:
- FullScreenDropzone works the same way as dropzone but instead of capturing dropped files from specific area it
uses browser window as dropzone.
New features
-
Select and MultiSelect components now support creating new items, items grouping and disabling
-
Accordion component now supports more options to customize icons and labels:
iconPosition
prop let's you choose where chevron icon will be rendered: right or left- with
icon
prop on Accordion and Accordion.Item components you can replace icons of all items at once or of each item individually
- Avatar component now supports stacking with AvatarsGroup:
New hooks
- use-resize-observer lets you subscribe to element size and position changes with ResizeObserver
- use-viewport-size hook returns viewport width and height
- use-mouse hook tracks mouse position over given element
- use-hover hook detects if mouse is over given element:
Other changes
- ActionIcon and Button components now support new
default
variant - Pagination component now supports adding first and last controls and removing next/prev buttons
- SimpleGrid component now supports
theme.breakpoints
usage inbreakpoints
prop - SimpleGrid was migrated to use CSS Grid Layout instead of flexbox
- Group component no longer supports Styles API, you can add styles directly to element and children instead
- New Space component lets you add spacing between elements without directly subscribing to theme
- Overlay and LoadingOverlay components now support
radius
prop - New MediaQuery component provides a simple API to manage breakpoints in jsx