Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Material-UI 4.9 Release Improves Support for Material Design Specification

Material-UI 4.9 Release Improves Support for Material Design Specification

This item in japanese

Material-UI, a React UI framework, recently released version 4.9.0 with dozens of improvements to UI components and better alignment with the Material Design specification.

Prior to version 4.9.0, Material-UI lacked consistent hover effects for all UI components. This release added or resolved inconsistencies with hover across several key UI components including the IconButton, ListItem, and TableRow.

This release resolves dozens of smaller inconsistencies and makes refinements. For example, prior to 4.9.0, the defaultValue prop of the Autocomplete multiple component was not updating when the default value was set as a data received through an API call.

With Material-UI 4.9.0, support now exists to update the value when the defaultValue prop changes after initial rendering. However, new default values only propagate when the component is in sync with the centralized store for all the components in an application. This preserves values the user already selected within the component.

In recent versions of Material-UI, on initial page load of an application, the breadcrumbs widget would stack its items on top of each other, causing apps to receive a "Clickable elements too close together" warning from the Google Search Console.

This issue is fixed in Material-UI 4.9.0 by removing the private BreadcrumbSeparator component, allowing the breadcrumbs component to work as expected on the initial page load.

In Material-UI 4.9.0, developers can set the custom padding for helperText in the TextField component. TextField may fill as much space as it needs for itself and eventual helperText.

As illustrated, the helperText behavior before Material-UI 4.9.0:

And the helperText behavior in Material-UI 4.9.0 and newer. Notice that the TextFields do not get pushed down in the view:

To learn more about the numerous refinements and improvements in the Material-UI 4.9.0 release, refer to the Material-UI 4.9.0 release notes.

After the release of Material-UI v4 in May 2019, Material-UI v5 is expected to be released in March 2021. The key changes proposed in Material-UI v5 are unstyled components, full strict mode support, and migration to styled components amongst others. Also, plans are to move the components SpeedDial, AutoComponent, Rating, Pagination, Alert, and Toggle button from a lab component to a core component in Material-UI v5.

Material-UI v5 will be designed to stay relevant in the long term. It aims to shift the developer's perception that Material-UI is, at its core, about providing material to build UIs.

Material-UI is one of the famous React UI frameworks with 6 million monthly npm downloads and 43k GitHub stars. Material-UI uses the grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

Material-UI provides React components that implement Google Material Design. Its components are inspired by the physical world objects and their textures on how they reflect light and cast shadows.

Material-UI is available as open-source software under the MIT license. Contributions are welcome via the Material-UI GitHub repository. Contributors should follow the Material-UI contribution guidelines.

Rate this Article