Technology moves fast! ⚑ Don't get left behind.🚢 Subscribe to our mailing list to keep up with latest and greatest in open source projects! πŸ†


Subscribe to our mailing list

material-ui

React components that implement Google's Material Design.

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star half bd79095782ee4930099175e5ce7f4c89fa3ddabcd56fffcc7c74f6f2a2d46b27 (4 ratings)
Rated 4.5 out of 5
Subscribe to updates I use material-ui


Statistics on material-ui

Number of watchers on Github 33890
Number of open issues 140
Average time to close an issue 3 days
Main language JavaScript
Average time to merge a PR about 20 hours
Open pull requests 271+
Closed pull requests 168+
Last commit over 1 year ago
Repo Created almost 5 years ago
Repo Last Updated over 1 year ago
Size 36.1 MB
Homepage http://www.materi...
Organization / Authormui-org
Latest Releasev0.20.0
Contributors276
Page Updated
Do you use material-ui? Leave a review!
View open issues (140)
View material-ui activity
View on github
Fresh, new opensource launches πŸš€πŸš€πŸš€
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating material-ui for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)
What people are saying about material-ui Leave a review
functionality in mobile is not 100 reliable, raised buttons do not work in chrome for mobile
works fine with react

Material-UI logo

Material-UI

[React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html). [![npm package](https://img.shields.io/npm/v/material-ui/next.svg)](https://www.npmjs.org/package/material-ui) [![npm download](https://img.shields.io/npm/dm/material-ui.svg)](https://www.npmjs.org/package/material-ui) [![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/v1-beta.svg)](https://circleci.com/gh/mui-org/material-ui/tree/v1-beta) [![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/v1-beta.svg)](https://codecov.io/gh/mui-org/material-ui/branch/v1-beta) [![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320) ![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg) [![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI) [![PeerDependencies](https://img.shields.io/david/peer/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui#info=peerDependencies&view=list) [![Dependencies](https://img.shields.io/david/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui) [![DevDependencies](https://img.shields.io/david/dev/mui-org/material-ui.svg)](https://david-dm.org/mui-org/material-ui#info=devDependencies&view=list) [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](http://isitmaintained.com/project/mui-org/material-ui "Average time to resolve an issue")

Installation

Material-UI is available as an npm package.

Stable channel (v0.x)

npm install --save material-ui

Pre-release channel (v1-beta) (Recommended for new projects.)

npm install --save material-ui@next

Please note that @next will only point to pre-releases; to get the latest stable release use @latest instead.

Supporting Material-UI

Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome backers. If you'd like to join them, please consider:

Your contributions, donations, and sponsorship allow us to build a sustainable organization. They directly support office hours, continued enhancements, great documentation and learning materials!

What's the difference between Patreon and OpenCollective?

Funds donated via Patreon directly support Olivier Tassinari's work on Material-UI. Funds donated via OpenCollective also support Olivier, but will be shared amongst other contributors and pay for operating expenses. These funds are managed transparently through the OpenCollective website. Your name/logo will receive proper recognition and exposure by donating on either platform.

Gold Sponsors

Gold Sponsors are those who have pledged $500/month and more to Material-UI.

via Patreon

via OpenCollective

0 1 2 3 4 5 6 7 8 9

Usage (v1-beta)

Here is a quick example to get you started, it's all you need:

import React from 'react';
import { render} from 'react-dom';
import Button from 'material-ui/Button';

function App() {
  return (
    <Button variant="raised" color="primary">
      Hello World
    </Button>
  );
}

render(<App />, document.querySelector('#app'));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Edit Button

Should I start with v1-beta?

We often get this question:

Should I start with v1-beta? Beta is beta, so it's not a final product and I'm not guaranteed anything.

Yes, you should.

Some users are starting projects with v0.x which given the quality and stability of v1 they shouldn't be. They are just creating extra work for themselves as they will have to transition at some point.

The v1-beta effort started in May 2016, and it resolves many of the issues with v0. Many of us are already using v1-beta in production with no problems, and resolving the occasional breaking change is less hassle than upgrading from v0.x to v1 would be.

Material-UI will never be a final product, you will never be guaranteed anything whether with v0.x, v1, or any future release. We are keeping v1 in beta so we can release breaking changes without having them slow us down.

The release notes always describe the breaking changes introduced with each release.

Bite the bullet and go for v1-beta.

Questions

For how-to questions and other non-issues, please use StackOverflow instead of Github issues. There is a StackOverflow tag called material-ui that you can use to tag your questions.

Examples

Are you looking for an example project to get started? We host some.

Documentation

Check out our documentation website.

Contributing

We'd greatly appreciate any contribution you make. :)

Changelog

Recently Updated? Please read the changelog.

Roadmap

The future plans and high priority features and enhancements can be found in the ROADMAP.md file.

Thanks

Thank you to BrowserStack for providing the infrastructure that allows us to test in real browsers.

License

This project is licensed under the terms of the MIT license.

material-ui open issues Ask a question     (View All Issues)
  • over 2 years [AutoComplete] Input field hidden by autocomplete in mobile safari
  • over 2 years IconMenu Click Not Triggered in Mobile Browsers
  • over 2 years [TextField] Misplaced browser suggestion on TextField with autocomplete="on"
  • over 2 years how to change the color of Filter-box-selectfield-menuitem ?
  • over 2 years Tabs ink bar does not respect value
  • over 2 years Support Webpack 2 / Rollup Tree shaking
  • over 2 years Paper doesn't accept a ref for it's div
  • over 2 years Dropdown doesnt work.
  • over 2 years <AutoComplete> focus lost when closing option list with ENTER or ESC
  • over 2 years [Dialog] Touch / Click on button affect the render of the dialog shadow when using Electron
  • over 2 years [Next][Circular Progress] Doesn't work on safari
  • over 2 years optgroup feature
  • over 2 years How to implement RadioButtonGroup with other
  • over 2 years Weird style issue of table header
  • over 2 years [FloatingActionButton] onClick using arrow function not working when mini={true}
  • over 2 years Tab Header Width Distribution
  • over 2 years [TextField] Floating Label Text overlaps the inputted text when the textfield is in a table.
  • over 2 years [SelectField] Tabbing between form components always skips SelectField
  • over 2 years Is there a way to convert a Stepper into the dot-stepper, such as for a carousel?
  • over 2 years Dialog + Velocity React
  • over 2 years [AutoComplete] Add option to require a selection from the list
  • over 2 years When tapping on a FlatButton that takes you to another page, sometimes the ripple does not play, but will play on the second page if there is another ripple element
  • over 2 years ListItems losing their background
  • over 2 years Button behind Drawer
  • over 2 years [DatePicker] Day order is not correct for jalali locale
  • over 2 years Cannot read property 'setData' of undefined[Slider]
  • over 2 years [ListItem-nestedItems]Customize icon for collapsible list
  • over 2 years [ListItem] Emoji's overlap on iOS Safari
  • over 2 years Dynamically add/remove tabs
  • over 2 years AutoComplete/PopOver hidden with a zIndexed parent in certain conditions
material-ui open pull requests (View All Pulls)
  • [Docs] Fix missing Object.assign on docs site
  • [DatePicker] Fix date picker docs typo
  • [DatePicker] Default to ISO-8601 DateTimeFormat & firstDayOfWeek
  • [Snackbar] Updated docs to give a warning to avoid unwanted hiding/sh…
  • [DatePicker] Deprecate `wordings` with `cancelLabel` and `okLabel`
  • [eslint] Enforce jsx-handler-names
  • [TouchRipple] Abort on scroll
  • [SelectField] autoFocus enabled
  • [Snackbar] Added optional customMessageEqualityTester callback property
  • [Popover] Set useLayerForClickAway to false with delay
  • [WIP][Docs] Add versions to docs site
  • [TextField] Shrink form label when input is autofilled
  • [RaisedButton] Customizable ripple effect style
  • [DatePicker] Add feature to show active days.
  • [raised-button] customisable ripple styles
  • [DatePicker][TimePicker] Correct the cursor and remove text selection
  • [TimePicker] fix issue where clock does not render in timepicker nested in dialog
  • [TextField] Adding the ability to call select on the TextField input
  • [DatePicker] Add startDate property
  • [Discussion] Utilize react-memo
  • [Slider] Add keyboard support
  • [WIP] move components to directories
  • [WIP] [Tooptip] Fix tooltip error with undefined dom node
  • [AutoComplete] Add key support for dataSource, add sort function property
  • [WIP] [ListItem] Fixes duplicate prepareStyles with primaryText element
  • [Docs] Add material-ui-country-flags to related projects
  • [TimePicker] Reinstate #3030 (Add support for custom wordings).
  • [Popover] absolute positioning
  • [New feature] Stepper material ui
  • [Slider] Touch improvements
  • [FontIcon] Add callback signatures to docs
  • [Overlay] Split out AutoLockScrolling
  • [Slider] Add unit tests
  • [Core] reorg internal modules
  • [autocomplete]Fix first item selection
  • [AppBar] Add iconStyleLeft prop
  • [Table] turn tBody into an array, to support multiple tbodys within a table
  • [AutoComplete] Add key(text) support for dataSource and more general item componenta support
  • [AppBar] Render children before MenuElementRight
  • [SelectField,TextField] Refactoring/Popover/Keyboard
  • [RadioButtonGroup] Enable handling of non-RadioButton children
  • [TimePicker] Fix for displaying defaultTime on time-picker.
  • [RaisedButton] Fix backgroundColor property
  • [MenuItems] Fix rendering order of parent and child/nested MenuItems
  • [TableBody] Add clickAsSelect prop
  • [DatePicker] Prevent keyboard selection of disbled dates
  • [Popover] Remove animated prop
  • [Feature] Scrollable tabs
  • [IconMenu] Enable styling the underyling List when using IconMenu
  • [Example] Fix vertical stepper on mobile
  • [TextField] add floatingLabelFocusStyle prop
  • [LinearProgress] determinate mode calculates wrong value if min/max is set
  • [RaisedButton] fix hover overlay for icon only buttons, fixes #3815
  • [Dialog] merge title style when title it a node
  • [TextField] added left/right icon #2932
  • [CircularProgress] Fix for Android
  • [FontIcon] Stopped icon's color overwriting
  • fix for issue #4013
  • [DatePicker][Docs]Range date picker
  • [TimePicker] Fix test for timepicker
  • [colorManipulator] Prevent illegal color values
  • [RaisedButton] Respect theme fontSize in <RaisedButton>
  • [DatePicker][TimePicker] Disable userSelect for Pickers
  • [TextField] Fix floatingLabel color
  • [EnhancedButton] Fix ripples not firing in resonse to taps
  • [AppNavDrawer] Links added to components in the left nav menu
  • [Core] Remove react-addons-update dependency
  • [DropDownMenu] Display leftIcon and rightIcon from MenuItems
  • [SelectField] Add callback signatures to docs; improve other props.
  • [FlatButton] added hover text color support
  • [Snackbar] Add support for multiline texts #3860
  • [DropDownMenu] - Failing test case when retrieving Children of DropDownMenu
  • [Chip] New component
  • [AutoComplete] Fix first item selection on keyboard focus
  • [ReactNative] Add support for the Subheader component
  • [Table] Reapply #3492 with checkbox cell highlight. Fix #1783, fix #3714
  • [DatePicker] Add possibility to customize particular days
  • [RaisedButton] Fixed color property passing down to SvgIcon
  • [Core] Add uniqueId generator
  • [SelectField] Include option to select multiple values.
  • [TimePicker] Fix auto reset of time on window resize
  • [DatePicker] Added className prop to DatePicker
  • [SelectField] Fix clicking floatingTextLabel not not opening menu. cl…
  • [IconButton] Fix children styles for IconButton
  • [AutoComplete]Fix Clear Value Issue
  • [TimePicker] Add a Fade-in component for hours-minute change transition
  • [Themes] Fix MuiThemeProvider default theme
  • [RaisedButton] fullWidth fix
  • [PopOver] Fix Animation vertical
  • [AutoComplete] Fix filter property leaking
  • [Stepper][StepButton] Add more tests and fix an issue with StepButton event handlers
  • [Buttons] Deprecate linkButton property
  • [Menu] Add basic hotkey-focusing feature
  • [TimePicker] Add Inline TimePicker
  • [Dialog] Internet Explorer blurry text issue
  • [Form components] Set `cursor:not-allowed` style when disabled
  • [Menu] Stop wheel events from propagating if scroll container is scrollable.
  • [CardTitle] Improve the support of RTL
  • [EnhancedButton] Fix not setting focus when keyboardFocused prop set
  • [AutoComplete] Add text and value field keys for objects list dataSource
  • [Switch] Add thumbSwitchedStyle and trackSwitchedStyle
  • [RadioButton] Fix IE double click disabled RadioButton
  • [Examples] Move to own repositories
  • [MenuItem] Allow styles on lefticon in non-desktop mode
  • [Stepper] Register clicks in Safari for Vertical non-linear example
  • [RaisedButton] Merged icon style prop with RaisedButton icon styles
  • [FlatButton] Merged icon style prop with FlatButton icon styles
  • [Documentation] fixed webpack production build
  • [SelectField] Fix invalid height when using floatingLabelText
  • [Toggle][Checkbox] setting the state in onCheck doesn't display the checked box
  • [SelectableList] Allow nested/wrapped ListItems
  • [TableBody] Don't set childrens' hoverable prop to false when showRow…
  • [Docs] Don't document standard DOM events
  • [AutoComplete] Add `chosenRequestText` property
  • FloatingActionButton Fix styling
  • [table] Add support for multiple tbody elements in a table
  • [DatePicker] Fix year overflow
  • [DropDownMenu] fix #4377
  • "Maximum call stack size exceeded " fixes #4337
  • [WIP][Button] Merge buttons as unified component.
  • [DatePicker] Expose dialog container style
  • [Themes] Make shadows general, and use in place of Paper
  • [WIP] [Core] Setup umd build
  • [BottomSheet] Add BottomSheet component
  • [TextField][MultiLine] Fix bug with multiLine cursor position on height change
  • [Dialog]correct behavior of esc-click for nested dialogs
  • [AutoComplete] Allow to replace searchText after item selected
  • [Feature Tabs] Scrollable tabs
  • [TableRow] - Add selected and stripe background color in props
  • [TableFooter] Fix when adjustForCheckbox is false
  • [Snackbar] Add support for multiline messages
  • [AutoComplete] Fix onNewRequest not firing on iOS
  • [Table] Row selectable prop fix
  • [Slider] Fix margin styling override
  • Update changelog for 0.15.1 and 0.15.2
  • Prepare 0.15.2 release
  • [Slider] Add support for vertical/reversible sliders
  • [DropDownMenu] Remove Synthetic Event from pooling when used asynchronously
  • [SvgIcon] Add themeable color
  • [AppNavDrawer] Links added to components in Menu
  • [TableFooter] Fix adjustForCheckbox rendering
  • [TextField] Take bottom position value from props styles
  • [TableBody](Fixes #1345) Respect child (TableRow) props when rendering
  • [ClickAwayListener] Add better support for IE11
  • [FlatButton] Never allow a disabled button to be in a hovered state.
  • [Themes][ListItem] Secondary Text color is incorrect fix
  • [Styles] POC using stylishly
  • [TextField] - Implement helper text/error text as a separate component
  • [eslint] Add find-new-rules to keep track of new rules
  • [DropDownMenu] Display leftIcon and rightIcon from MenuItems
  • [SelectField] pass floatingLabelFixed property to TextField
  • [Proof-of-Concept] react-mixout Demonstration
  • [GridList] Allow to set cellHeight to 'auto'
  • [TextField] False should be a valid value
  • [MakeSelectable] Fix Unknown prop `selectedItemStyle` on <div> tag.
  • [ListItem] with disableKeyboardFocus=true does not get keyboard focus
  • [Snackbar] - fix button position with long texts
  • [IE9] Switch from translate3d to translate for compatibility
  • [Popover] Fix bad positioning on IOS devices
  • [DatePicker] Added a clear date example
  • [Tabs] Fix issue #4633, an edge case where children (rendered Tab elements) and value props change.
  • [core] next - add flowtype
  • [TableBody] Add clickAsSelect prop and default
  • [Table] update `this.state.allRowsSelected` on `this.props.allRowsSelected` change
  • [Table] Fixing selectAll functionality a bit
  • [TableBody] fix bug when component is keeping last item selected after deselecting all
  • [TableFooter] - Render children correctly if adjustForCheckbox is set to false
  • [core] Get rid of the all the propTypes in production
  • [SelectField] Implement keyboard tabbing
  • [ListItem] New property open to toggle nested list
  • [BottomNavigation] Initial implementation
  • [Tab] add activeClassName property
  • [Popover] Making sure Popover has correct position
  • [Toggle] Added switched and disabled style to toggle
  • [MenuItem] Add right padding when there is icon.
  • [TextFieldFlat] Add TextFieldFlat Component
  • [TextField] Don't modify error bottom style if we need to override it
  • [DropDownMenu] Do not wrap below dropdown menu.
  • [CardHeader] Removed the unnecessary right padding
  • [BottomSheet] Add BottomSheet component
  • [getMuiTheme] Changed primary color to accent color in toggle
  • [NestList]When the nested level is deep, and nestedLists are too many, the performace is bad
  • [TouchRipple] Fix a positioning issue when isRtl={true}
  • [MenuItem][ListItem] Added hoverColor prop to override default hoverC…
  • [Checkbox] Made box transparent when checked
  • [TableRow] Added alternative (like in desktop systems) behaviour for ctrl/comman…
  • [DropDownMenu][SelectField] Add Keyboard support
  • [DatePicker] Add openImmediately property
  • MenuItem Fix hoverColor muiTheme override
  • [Tabs] Uniform height of tab buttons using flexbox instead of inline
  • [DropDownMenu] [SelectField] Add `defaultText` prop shown when there's no item with the corresponding value
  • [Mobile Responsive Table] responsive table component for mobile view
  • [Switch] Add thumbSwitchedStyle and trackSwitchedStyle
  • [WIP][Tabs] Initial migration of tab components
  • [DropDownMenu] Accept selectedMenuItemStyle prop
  • DateRangePicker creation
  • [FloatingActionButton] set touch flag in handleTouchEnd
  • [AutoComplete] Add popoverProps to pass to Popover
  • [GridList] Support for cellHeight:auto
  • [DatePicker/Calendar] Added default firstDayOfWeek prop to Calendar c…
  • [DatePicker] Add keyboard support to inline mode
  • [AutoComplete] Add multiselect & selectedOptions features + improvements
  • [DatePicker] New property displayMode
  • make it run locally on windows box
  • [Popover] Add missing animated=false
  • [DatePicker] Add style and className props to buttons
  • [Grid] add-titleColor-option-for-GlidTile
  • [Tabs] Add new property: fixedTabWidth
  • [AutoComplete] Add onClose method
  • [Layout]: Add new `Layout` components
  • [FloatingActionButton] Animate appearing of the FAB
  • [BottomNavigation] Migration of bottom-navigation component
  • [Subheader] Migration of subheader component
  • [AutoComplete] Indicate that underlaying TextField inherits all non-d…
  • Take the correct color
  • [Tooltip] improve tooltip positioning, closes #5057
  • [CheckBox] Fix incorrect hitbox size after clicking checkbox
  • [iconButton] Added hoverColor prop
  • [FloatingActionButton] Fix regression with n children
  • [LinearProgress] Migration of linear-progress component
  • [ToolbarGroup] Fix vertical alignment of nested IconButton
  • [BottomSheet] Add new component
  • [Menu][DropDownMenu][SelectField] menuItemStyle & menuItemSelectedStyle
  • [npm] Upgrade the dependencies
  • [ListItem] Clear hover state if componet get's disabled
  • [AutoComplete] Fix Popover's style overriding popoverProps
  • [TextField] Breaks character composition #3394 bug fixed
  • [next][Button] accent/contrast prop consistency with IconButton.
  • [next][Switch] add optional selection label
  • [DatePicker] Add ability to use keyboard to write date
  • [docs] Improve the demos of the Tabs component
  • Migration of the TimePicker [next] project
  • [Docs] Flat button example Firefox behavior fix (containerElement=label)
  • [Docs] Add Threejslive to showcase
  • [EnhancedButton] Fix ripples not firing in response to taps
  • [DatePicker] Fix focus for datepicker by closing on blur and opening …
  • [Hidden] fixes, demos, regression tests, and `only` functionality
  • [docs] Start addressing documentation issues
  • [Slide] Add test coverage for `componentDidMount()`
  • [Snackbar] Add describedby and role to snackbar to support assistive technologies
  • [SelectField] Port to next WIP
  • [Dialog] Improves borders behavior in scrollable Dialog
  • [TextField] Make it meet guidelines
  • [TextField] Add in support for multiline text fields
  • [DatePicker] allow year selecton to be open before month/day selection
  • [Snackbar] Port to next
  • [Menu] focus handling fix
  • [AutoComplete] Fix ghost clicks on new requests
  • [Dialog] disambiguation of types to match the spec
  • [MuiThemeProvider] Add support for creating it without default theme
  • [AutoComplete] Prevent menu from closing when clicking scrollbar in IE11
  • [Popover] Fix user can't tap on text input to change cursor location
  • [Drawer] Support all types of navigation drawers in the Material Design Guidelines
  • [GridList] migrate to next branch
  • [examples] Add missing typescript dependency
  • [TextField] Show length indicator
  • [dom] Fix Ripple effect on scroll
  • [RaisedButton] Conditionally apply overlay backgroundColor
  • Swipeable drawer
  • [ButtonBase]: Ripple should start on programmatically call to focus
  • [RefreshIndicator] Port component
  • [core] Switch to Typescript incrementally (tests run @babel/register)
  • [SpeedDial] New component
  • [TextField] Use selectionEnd instead of selectionStart to fix caret position issue
  • [Checkbox, Radio, Switch] Fix id in internal input
  • [ToggleButtons]: Add toggle buttons
  • [Selection Controls] Change default color, add color prop
  • Update EnhancedButton.js to prevent duplicate event processing
  • Checkbox selection fixes for Table and TableRow components
  • [themes] Introduce a themes website ⚑️
  • [SpeedDial] Add a tooltip title to main button
material-ui questions on Stackoverflow (View All Questions)
  • Adding material ui to a React Component
  • Webpack errors related to material-ui
  • Material-ui: How to stop propagation of click event in nested components
  • Reactjs Material-UI - Unexpected token on arrow functions
  • How to use Material-UI in asp.net mvc project
  • How can I get input radio elements to horizontally align in react [material-ui]?
  • material-ui: input alters the tabs' this.state.value
  • Fixing tab bar in material-ui
  • looking for a material-ui template using stylus
  • Material-UI app bar comes with a margin
  • Material ui vs react-toolbox on react
  • Having trouble styling Material UI buttons
  • Material UI inline style not working
  • How to get AppBar menu working in react material-ui
  • Close Material UI Component When Clicked Elsewhere
  • Material-UI: AppBar => FlatButton Text unstyled if not defined directly
  • Material UI Layout divide by angle line
  • How can a Material UI Date picker element be triggered from a Flat or Raised button element
  • How to get value of Date Picker from Material Ui
  • Dropdown with custom input in material ui
  • material-ui components such as DropDownMenu stop working when using redux-devtools + hot reloading
  • material-ui setErrorText not working in material-ui 0.11
  • How to disable box-shadows globally for all material-ui React components?
  • Reactjs Material UI state is undefined on event
  • Disable autofill forms with React and Material UI
  • How to add svg-icons from material-ui
  • Getting a warning in Console when using Material UI menu. Suggest me solution. I am using HTML in text object
  • Material UI Menu using routes
  • Creating a dynamic header UI with React and Material UI
  • error "Cannot find module 'material-ui/src/navigation/close"
material-ui list of languages used
material-ui latest release notes
v1.0.0-beta.37
Mar 11, 2018

Big thanks to the 13 contributors who made this release possible.

Here are some highlights :

  • An important fix of the focus/blur logic of the Select (#10538) @oliviertassinari.
  • A multiple selection downshift example (#10550) @oliviertassinari.
  • A new parcel example (#10575) @oliviertassinari.
  • And many more bug fixes and documentation improvements.

Breaking change

  • [classes] Move the XXXClassName to the classes property (#10600) @oliviertassinari

These properties were introduced before classes. Exposing a single pattern makes things more predictable and easier to work with.

-<Tabs buttonClassName="foo" indicatorClassName="bar" />
+<Tabs classes={{ scrollButtons: 'foo', indicator: 'bar' }} />
-<TextField labelClassName="foo" helperTextClassName="bar" />
+<TextField InputLabelProps={{ className: 'foo' }} FormHelperTextProps={{ className: 'bar' }} />
  • [CssBaseline] Rename from Reboot (#10605}

The new wording should clarify the purpose of the component. For instance, it's not about adding JavaScript polyfills.

-<Reboot />
+<CssBaseline />

Component Fixes / Enhancements

  • [Select] Fix wrong onBlur onFocus logic (#10538) @oliviertassinari
  • [ExpansionPanel] Fix controlled behavior (#10546) @oliviertassinari
  • [Autocomplete] Add multiple downshift example (#10550) @oliviertassinari
  • [Autocomplete] selectedItem can be null (#10565) @caub
  • [core] Improve IE11 support (#10568) @oliviertassinari
  • [TextField] Better inputComponent demo (#10573) @oliviertassinari
  • [typescript] Add a test case for ListItemIcon (#10593) @oliviertassinari
  • [ListItemText] Make the children an alias of the primary property (#10591) @caub
  • [Button] Fix Button variant prop description (#10578) @teekwak
  • [Table] Fix table pagination example empty row height (#10588) @amcgee
  • [Icon] Fix a bug in Chrome 64.0 (#10594) @caub
  • [List] use theme for margin in ListItemText (#10597) @caub
  • [StepIcon] enable CSS modifications of active step (#10599) @vkentta
  • [Tooltip] Add enterTouchDelay and leaveTouchDelay props (#10577) @petegivens

Docs

  • [docs] Simplify the CDN example (6e4cc723689961582ede16db421cbdf24ac7c4b9) @oliviertassinari
  • [docs] Add showcase to readme - componofy (#10541) @DalerAsrorov
  • [docs] Add Cryptoverview to the showcase (#10545) @leMaik
  • [docs] Add menu Collapse example (#10548) @oliviertassinari
  • [docs] Add PersonalBlog Gatsby starter to Showcase (#10566) @greglobinski
  • [docs] Add parcel example (#10575) @oliviertassinari
  • [docs] Fix typo in contributing readme (#10586) @chiragmongia
  • [docs] Fix next.js example to enable styled-jsx with material-ui (#10580) @shibukawa
  • [docs] Add the latest backers (#10602) @oliviertassinari
  • [docs] Add Planalyze to Showcase (#10603) @dancastellon
  • [docs] Improve the htmlFontSize documentation (#10604) @oliviertassinari

Core

  • [core] Fix type definitions (#10553) @stefanorie
  • [core] Better overrides merge support (#10606) @oliviertassinari
v1.0.0-beta.36
Mar 5, 2018

Big thanks to the 14 contributors who made this release possible.

Here are some highlights :

  • We have started the effort toward supporting the async API of react@16.3.0 (#10489, #10523) @oliviertassinari.
  • Document how to use Material-UI with a CDN (#10514) @zelinf.
  • And many more bug fixes and documentation improvements.

Breaking change

  • [SvgIcon] Allow changing the width with the font-size (#10446) @oliviertassinari

Remove the fontSize property. The SvgIcon behavior is closer to the Icon behavior.

-<Icon fontSize />
-<SvgIcon fontSize />
+<Icon />
+<SvgIcon />

Now, you can use the font-size style property to changr the size of the icon.

  • [classes] Normalize the classes names (#10457) @oliviertassinari

This is an effort in order to harmonize the classes API. The best way to recover from this breaking change is to check the warnings in the console and to check the added documentation around the design rules around this API.

Component Fixes / Enhancements

  • [Table] Default display style for all table components (#10447) @caub
  • [Collapse] Fix description (#10454) @onurkose
  • [ButtonBase] Add a TouchRippleProps property (#10470) @christophediprima
  • [Select] Ensure label is shrinked when using startAdornment (#10474) @carab
  • [Card][List] Implement responsive gutters (#10477) @lukePeavey
  • [icon] Add side-effects: false to material-ui-icons (#10482) @b1f6c1c4
  • [IconButton] Fix theme.spacing.unit size dependency (#10486) @oliviertassinari
  • [ListItem] Avoid li > li issue (#10484) @oliviertassinari
  • [ListItem] Fix ContainerProps.className propagation (#10488) @oliviertassinari
  • [Textarea] Prepare React 16.3.0 (#10489) @oliviertassinari
  • [icon] Add build:es for material-ui-icons (#10497) @b1f6c1c4
  • [ButtonBase] Fix the ripple on Edge (#10512) @oliviertassinari
  • [Autocomplete] Update the demos so people can stack the components (#10524) @oliviertassinari
  • [Button] Add override support for sizeLarge and sizeSmall (#10526) @wenduzer
  • [Modal] Use prototype functions in ModalManager (#10528) @ianschmitz

Docs

  • [docs] Fix Roadmap docs formatting (#10501) @cherniavskii
  • [docs] EnhancedTable Demo (#10491) @kgregory
  • [docs] Add new Showcase project (#10509) @chriswardo
  • [Select] Document when the value is required (#10505) @MichaelArnoldOwens
  • [Select] Document the renderValue signature (#10513) @oliviertassinari
  • [docs] Add a CDN example (#10514) @oliviertassinari
  • [docs] Fix SSR rendering in Gatsby example (#10536) @LegNeato

Core

  • [core] Prepare the async API (#10523) @oliviertassinari
  • [core] Upgrade the dev dependencies (#10456) @oliviertassinari
  • [core] Upgrade the dev dependencies (#10515) @oliviertassinari
v1.0.0-beta.35
Feb 24, 2018

Big thanks to the 20 contributors who made this release possible.

Here are some highlights :

  • A new lab npm package (#10288) @mbrookes.
  • A breaking changes ROADMAP before v1 (#10348) @oliviertassinari.
  • And many more bug fixes and documentation improvements.

Breaking change

N/A

Component Fixes / Enhancements

  • [Stepper] Add style override types (#10334) @vkentta
  • [Input] Reset the line-height (#10346) @oliviertassinari
  • [Select] Revert #9964 (#10347) @oliviertassinari
  • [lab] Create lab package, add SpeedDial (#10288) @mbrookes
  • [Button] Update Button mini description (#10355) @lorensr
  • [SpeedDial] Fix onClick target element (#10368) @mbrookes
  • [IconButton] Fix class key types (#10374) @vkentta
  • [Chip] Ignore events generated by descendants (#10372) @maxdubrinsky
  • [CardHeader] Add missing action classes key definition (#10379) @chubbsMcfly
  • [Dialog] Consistent description (#10377) @oliviertassinari
  • [Select] Fix the vertical-align (#10380) @oliviertassinari
  • [Snackbar] Disable pausing of auto hide when window loses focus (#10390) @SebastianSchmidt
  • [Select] Add SelectDisplayProps prop (#10408) @noah-potter
  • [SelectInput] Add tabIndex prop (#10345) @keenondrums
  • [Select] Make 'type' prop able to be overwritten (#10361) @fabijanski
  • [Select] Set type undefined rather than null (#10430) @caub
  • [ButtonBase] Fix accessibility (#10434) @oliviertassinari
  • [SwitchBase] Fix defaultChecked issue (#10444) @tanmayrajani
  • [SwitchBase] Prevent defaultChecked regression (#10445) @oliviertassinari

Docs

  • [Transitions] Document transition style prop handling (#10322) @AdamGorkoz
  • [Drawer] Add clipped navigation drawer demo (#10330) @AdamGorkoz
  • [docs] Fix demo links for new util components (#10337) @jprince
  • [docs] Add react-final-form to Related Projects (#10352) @mbrookes
  • [docs] rename theme-default to default-theme (#10356) @mbrookes
  • [docs] Fix modal page link (#10360) @tanmayrajani
  • [docs] Plan the breaking changes before v1 (#10348) @oliviertassinari
  • [docs] Fix IE 11 and W3C warnings (#10394) @oliviertassinari
  • [docs] Sort the pages by path and ignore dashes (#10396) @leMaik
  • [docs] Autocomplete migration (#10397) @oliviertassinari
  • [docs] Add AudioNodes to the showcase (#10407) @JohnWeisz
  • [docs] Breaking changes feedback notification (#10413) @mbrookes
  • [docs] Improve readability (#10412) @oliviertassinari
  • [docs] Add material-ui-autosuggest to related projects (#10415) @tgrowden
  • [docs] Update transitions.md (#10417) @caub
  • [docs] Fix minor typo in breaking-changes notification (#10418) @phazor
  • [docs] Description of how component will render (#10432) @oliviertassinari
  • [docs] Add CSSGrid comparison example (#10433) @caub

Core

  • [core] Upgrade some dependency to start looking into React 16.3 (#10338) @oliviertassinari
  • [core] Remove direct references to window/document objects (#10328) @ianschmitz
  • [core] Use tabIndex as number (#10431) @oliviertassinari
More projects by callemall View all
Other projects in JavaScript