Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
MIT License
Big thanks to the 18 contributors who made this release possible.
Here are some highlights ✨:
v1-beta
branch (#8291). Thank you!In the following diff SwitchBase
can be a Checkbox
a Radio
or a Switch
.
-<SwitchBase disabled disabledClassName={disabledClassName} />;
+<SwitchBase disabled classes={{ disabled: disabledClassName }} />;
Big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
ClickAwayListener
component was made public (#8967)Input
and FormLabel
component do no longer inherit the font-size. You might have to override them explicitly.-Menu.classes.root
+Menu.classes.paper
-import { withResponsiveFullScreen } from 'material-ui/Dialog';
+import { withMobileDialog } from 'material-ui/Dialog';
disabled
from FormControl (#8917) @nllarsonBig thanks to the 17 contributors who made this release possible.
Here are some highlights ✨:
withStyles()
with react-hot-loader. <Grow
- transitionDuration={{
+ timeout={{
enter: enterDuration,
exit: leaveDuration,
}}
/>
- <Dialog transition={<Slide direction="left" />} />;
+ const Transition = props => <Slide direction="left" {...props} />
+ <Dialog transition={Transition} />;
- <Snackbar transition={<Slide direction="left" />} />;
+ const Transition = props => <Slide direction="left" {...props} />
+ <Snackbar transition={Transition} />;
One important thing to notice is that the component creation needs to be outside of the render method. Otherwise a new instance will be created and the animation will lose his state.
jss-rtl
needs to be installed and added to jss by the users. We do no longer do it by default.Big thanks to the 14 contributors who made this release possible.
Here are some highlights ✨:
I have noticed one inconsistency with the className
property.
The value should have been applied on the root of the component.
We enforce this behavior now.
rows
property (#8740) @fathybBig thanks to the 14 contributors who made this release possible.
This release is mostly about stability.
We have merged many bug fixes PRs and documentation improvement PRs.
We are garbage collecting all the features we have been adding lately.
As this garbage collection stabilize, we will be able to add new features, like a stepper, extension panel or date/time pickers. But we are not here yet.
For instance, we need to upgrade all our dev dependencies to react@16 first.
- <Grid container xs={6} align="flex-end">
+ <Grid container xs={6} alignItems="flex-end">
<Grid item>
Big thanks to the 18 contributors who made this release possible.
Here are some highlights ✨:
withStyles()
Higher-order Component (#8561) @pelotom and @sebald <TableFooter>
- <TablePagination
- count={data.length}
- rowsPerPage={rowsPerPage}
- page={page}
- onChangePage={this.handleChangePage}
- onChangeRowsPerPage={this.handleChangeRowsPerPage}
- />
+ <TableRow>
+ <TablePagination
+ count={data.length}
+ rowsPerPage={rowsPerPage}
+ page={page}
+ onChangePage={this.handleChangePage}
+ onChangeRowsPerPage={this.handleChangeRowsPerPage}
+ />
+ </TableRow>
</TableFooter>
This release improves the compatibility with React@16.
Big thanks to the 2 contributors who made this release possible.
Big thanks to the 18 contributors who made this release possible.
Here are some highlights ✨:
- <TableCell checkbox>
+ <TableCell padding="checkbox">
- withTheme,
+ withTheme(),
<Dialog
- enterTransitionDuration={100}
- leaveTransitionDuration={100}
+ transitionDuration={100}
</Dialog>
<Dialog
- enterTransitionDuration={100}
- leaveTransitionDuration={200}
+ transitionDuration={{
+ enter: 100,
+ exit: 200,
+ }}
</Dialog>
getWidth
as width
with a spec (#8387) @rosskevincomponent
property (#8376) @AndriusBilBreakpointsOptions
in createBreakpoints
(#8374) @peterpricecreateShallow
typings (#8415) @sebaldwithStyle
use cases (#8399) @sebaldBig thanks to the 4 contributors who made this release possible.
Big thanks to the 25 contributors who made this release possible.
Wait, what?! We have been merging 52 pull requests from 25 different people in just 6 days (and closed 60 issues). This is a new record for the project. The v1-beta
version is definitely getting traction.
Thanks for the support!
Here are some highlights ✨:
v0.x -> v1.x
migration as well as a documentation page. @vividh (#8311, #8333, #8314)material-ui@next
has just crossed react-toolbox in terms of downloads on npm.const muiTheme = createMuiTheme({
breakpoints: {
- breakpointsMap: {
+ values: {
xs: 360,
sm: 768,
md: 992,
lg: 1200,
xl: 1440,
},
},
});
paperWidthXs: {
- maxWidth: theme.breakpoints.getWidth('xs'),
+ maxWidth: theme.breakpoints.values.xs,
},
@pelotom did a great job improving the withStyles
typings, such that less generics are required to be written! Most notably, you no longer have to pass a map of class names to withStyles
:
- withStyles<{ root: string; }>(...)
+ withStyles(...)
Also, props
can now be set when applying the HOC:
- const StyledComponent = withStyles<
- StyledComponentProps,
- StyledComponentClassNames
- >(styles)(Component);
+ const StyledComponent = withStyles(styles)<StyledComponentProps>(
+ ({ classes, text }) => (
+ <div className={classes.root}>
+ {text}
+ </div>
+ )
+ );
When withStyles()
is used as a decorator and strictNullChecks
is enabled, one has to use the !
operator to access classes from within the class.
resumeHideDuration
property (#8272) @AndriusBilfullWidth
property (#8329) @AndriusBilGrid
to accept HTMLAttributes
props (#8317) @michaelgruberBig thanks to the 4 contributors who made this release possible.
Big thanks to the 12 contributors who made this release possible.
- <Tooltip label="Add">
+ <Tooltip title="Add">
withResponsiveFullScreen
, Input
+ Select
(#8214) @sebaldThis is an early release as we have been breaking the typescript typings with 1.0.0-beta.9.
Hopefully, we are in a better state now.
Here are some highlights:
Big thanks to the 13 contributors who made this release possible.
+import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
+import KeyboardArrowRight from 'material-ui-icons/KeyboardArrowRight';
<MobileStepper
- onBack={this.handleBack}
- onNext={this.handleNext}
- disableBack={this.state.activeStep === 0}
- disableNext={this.state.activeStep === 5}
+ nextButton={
+ <Button dense onClick={this.handleNext} disabled={this.state.activeStep === 5}>
+ Next
+ <KeyboardArrowRight />
+ </Button>
+ }
+ backButton={
+ <Button dense onClick={this.handleBack} disabled={this.state.activeStep === 0}>
+ <KeyboardArrowLeft />
+ Back
+ </Button>
+ }
/>
button
and a
behavior the same (#8130) @oliviertassinaribackgroundPosition: 'center'
to CardMedia (#8148) @kripodButtonBase
(#8175) @sebaldwithStyles
usable as decorator (#8178) @sebaldAgain, this release is particularly dense! Here are some highlights:
Big thanks to the 13 contributors who made this release possible.
N.A
image
to CardMediaProps (#8033) @sebaldBottomNavigation
s onChange type (#8067) @sebaldfocusable
(#8102) @NLincolnBig thanks to the 8 contributors who made this release possible.
N.A
styles
(#7975) @sebaldtype
property, remove docked
property in TypeScript definition (#7998) @jaredklewisBig thanks to the 7 contributors who made this release possible.
N.A
This release is particularly dense! Here are some highlights:
Big thanks to the 12 contributors who made this release possible.
const theme = createMuiTheme({
- palette: createPalette({ primary: deepOrange, accent: green }),
+ palette: createPalette({ primary: deepOrange, secondary: green }),
});
flatAccent: {
- color: theme.palette.accent.A200,
+ color: theme.palette.secondary.A200,
-<Drawer docked />
+<Drawer type="persistent" />
[theme] Simplification of the API (#7934) @oliviertassinari
material-ui/styles/theme
, the path changed:-import createMuiTheme from 'material-ui/styles/theme';
+import createMuiTheme from 'material-ui/styles/createMuiTheme';
createMuiTheme()
. Notice that you can still change the output object before providing it to the <MuiThemeProvider />
. const theme = createMuiTheme({
- palette: createPalette({
+ palette: {
primary: blue,
secondary: pink,
}),
- typography: createTypography(palette, {
+ typography: {
// System font
fontFamily:
'-apple-system,system-ui,BlinkMacSystemFont,' +
'"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
- }),
+ },
-},
+});
[Input] Better support required field (#7955) @oliviertassinari
Following Bootstrap, we are now forwarding the required property down to the input component. We used to only apply aria-required
. This move makes us less opinionated and should help with native form handling.
If you want to avoid the default browser required property handling, you can add a noValidate
property to the parent form
.
A big shout-out to @sebald for our first TypeScript coverage.
Another notable change is the migration of the documentation to Next.js, it's twice as fast as before 🚀.
Big thanks to the 9 contributors who made this release possible.
Push #7741 initiative forward (use value
and onChange
as controlling properties)
-<RadioGroup selectedValue="foo">
+<RadioGroup value="foo">
// ...
Big thanks to the 11 contributors who made this release possible.
This is an effort in the prolongation of #2957 where value
/onChange
is the idiomatic interface to control a component.
-<Tabs index={0}>
+<Tabs value={0}>
// ...
The primary motivation for this change is simplicity, it's also making our interface closer to
react-jss
.
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
-const styleSheet = createStyleSheet('Button', {
+const styles = {
root: {
background: 'red',
},
-});
+};
// ...
-export default withStyles(styleSheet)(AppContent);
+export default withStyles(styles, { name: 'Button' })(Button);