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 15 contributors who made this release possible!
Here are some highlights ✨:
Name | Description |
---|---|
root | Styles applied to the root element. |
label | Styles applied to the span element that wraps the children. |
… | … |
After many iterations, we are happy to announce @material-ui/icons
v2.0.0 💃.
With this version, you can take advantage of all the icons recently released by Google:
https://material.io/tools/icons/. There are more than 5,000 icons.
(#12016, #12036, #12170, #12111, #12225)
The 1.4.0 release of Material-UI has introduced a new implementation of the Tooltip and Popper component.
This release fixes a lot of issues following the rewrite (#12168, #12161, #12194, #12223, #12218).
Thank you for reporting all these problems 🐛. Hopefully, it's very stable now.
Creative Tim has just completed their second Material-UI theme 💅.
It's an important milestone for the themability of Material-UI.
We are going to keep working on adding more themes to the list.
@material-ui/[email protected] allows React users to take advantage of the icons revamp the Material Design Team has been recently released. Some icons have been removed, ~150 new icons have been added, and some icons have been renamed. There are also currently some issues with the size of certain icons. Please refer to #12016 for further details.
innerRef
to withWidth and withTheme (#12236) @iteloBig thanks to the 21 contributors who made this release possible.
Here are some highlights ✨:
The component is -1kB gzipped smaller and much faster.
You can render 100 of them on a page with no issue.
It's also introducing a new component: Popper, an abstraction on top of Popper.js.
People can now dynamically change the theme of the whole documentation.
N/A
isPlainObject
to avoid dropping prototypes (#12100) @kivlorBig thanks to the 13 contributors who made this release possible.
Here are some highlights ✨:
N/A
N/A
Big thanks to the 10 contributors who made this release possible.
Here are some highlights ✨:
N/A
auto
to TypeScript definitions (#11933) @woobiancacreateStyles
to import (#11975) @SylphonyN/A
Big thanks to the 6 contributors who made this release possible.
This release fixes some important regressions.
We are making it outside of the normal schedule.
N/A
N/A
Big thanks to the 16 contributors who made this release possible.
Here are some highlights ✨:
N/A
allVariants
key in the theme (#11802) @oliviertassinaricomponent
property (#11844) @C-Rodgcomponent
prop types (#11863) @jedwards1211N/A
Big thanks to the 15 contributors who made this release possible.
Here are some highlights ✨:
React.createRef
support ⚛️ (#11757) @t49tran.withWidth()
helperN/A
type
property (#11728) @C-RodgBig thanks to the 23 contributors who made this release possible.
Here are some highlights ✨:
N/A
clickable
property (#11613) @vilvaathibanpbBig thanks to the 30 contributors who made this release possible.
Here are some highlights ✨:
N/A
Our first stable v1 release! 🎉
It has taken us two years to do it, but Material-UI v1 has finally arrived!
We are so excited about this release, as it's setting a new course for the project. Thank you to everyone, especially to the team, and to everyone who's contributed code, issue triage, and support. Thank you.
Some statistics with v1 while it was in alpha and beta:
Big thanks to the 10 contributors who made this release possible.
Here are some highlights ✨:
N/A
Big thanks to the 14 contributors who made this release possible.
Big thanks to the 11 contributors who made this release possible.
Here are some highlights ✨:
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
import {
Table,
TableBody,
TableCell,
TableFooter,
TablePagination,
TableRow,
} from 'material-ui';
-import CircularProgress from '@material-ui/core/Progress/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';
-import { ListItem } from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
We provide a codemod to automate the migration: https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod#import-path. I have used it to upgrade all the demos in the documentation :).
Split the responsabilities between the different components. Help with tree-shaking.
- <Grid item xs hidden={{ xlUp: true }}>
- <Paper>xlUp</Paper>
- </Grid>
+ <Hidden xlUp>
+ <Grid item xs>
+ <Paper>xlUp</Paper>
+ </Grid>
+ </Hidden>
The text underline color customization change:
underline: {
'&:after': {
- backgroundColor: purple[500],
+ borderBottomColor: purple[500],
},
},
Big thanks to the 4 contributors who made this release possible.
Here are some highlights ✨:
If you are using TypeScript, 2.8 or later is required.
N/A
Big thanks to the 7 contributors who made this release possible.
Here are some highlights ✨:
N/A
Big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
I couldn't find a clean way to support the render props pattern.
Doing such would require to greatly reduce the usage of JSX.
It would really harm source code readability.
Instead, I have been focusing on standardizing our component injection story.
This way, we can go back to the render props after stable v1 is released and see if source code readability worth be sacrificed for the render prop pattern.
<Tabs
- TabScrollButton={TabScrollButtonWrapped}
+ ScrollButtonComponent={TabScrollButtonWrapped}
<TablePagination
- Actions={TablePaginationActionsWrapped}
+ ActionsComponent={TablePaginationActionsWrapped}
<Dialog
- transition={Transition}
+ TransitionComponent={Transition}
<Menu
- transition={Transition}
+ TransitionComponent={Transition}
<Snackbar
- transition={Transition}
+ TransitionComponent={Transition}
<Popover
- transition={Transition}
+ TransitionComponent={Transition}
<StepContent
- transition={Transition}
+ TransitionComponent={Transition}
This change is for consistency with the other components. No need to repeat the component name in the property.
<Snackbar
- SnackbarContentProps={{ 'aria-describedby': 'notification-message' }}
+ ContentProps={{ 'aria-describedby': 'notification-message' }}
Makes the API consistant with LinearProgress
<CircularProgress
- min={10}
- max={20}
- value={15}
+ value={(15 - 10) / (20 - 10) * 100}
/>
The rename started with #11090. I should have taken the time to complete it in the first place. This way, we are fully consistent with the spec: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo :)
<ButtonBase
- onKeyboardFocus={this.handleVisible}
+ onFocusVisible={this.handleVisible}
Big thanks to the 17 contributors who made this release possible.
As long as you are providing a valid URL to <CardMedia image />
, it should be working. However, previously "
escaped URL will no longer work.
Big thanks to the 8 contributors who made this release possible.
Here are some highlights ✨:
[ButtonBase] Better keyboard focused story (#11090) @oliviertassinari
keyboardFocused
feature focusVisible
in order to follow the CSS specification wording:classes
property to host the focus visible feature. The fact that the classes don't cascade was making it hard to use. Instead, we rely on a focusVisibleClassName
property. This is allowing any component along the rendering chain to use the feature. For instance, a Switch component: Switch > SwitchBase > IconButton > ButtonBase.<ButtonBase
- classes={{
- keyboardFocused: 'my-class-name',
- }}
+ focusVisibleClassName="my-class-name"
/>
Big thanks to the 15 contributors who made this release possible.
Here are some highlights ✨:
This breaking change is important. It might be the most painful to recover from before stable v1 (May 17th 2018).
We have changed the CSS specificity rule to solve #10771 at scale.
It's inspired by the Bootstrap approach to writing CSS. It follows two rules:
color
and variant
properties are considered a variant.:hover
, :focus
, etc.).Example:
const styles = {
- checked: {
- color: green[500],
+ root: {
+ color: green[600],
+ '&$checked': {
+ color: green[500],
+ },
},
+ checked: {},
};
<Checkbox
classes={{
+ root: classes.root,
checked: classes.checked,
}}
/>
style
prop (#10994) @franklixuefeiBig thanks to the 14 contributors who made this release possible.
Here are some highlights ✨:
material-ui-icons
to @material-ui/icons
(#10957) @oliviertassinari-import FormatTextdirectionRToL from 'material-ui-icons/FormatTextdirectionRToL';
+import FormatTextdirectionRToL from '@material-ui/icons/FormatTextdirectionRToL';
global
is defined before trying to use it (#10933) @joliss