Breaking Changes
- Refactored all CSS into Javascript (#30, #316)
- All Material-UI components now have their styles defined inline. This solves
many problems with CSS as mentions in @vjeux's presentation
such as polluting the global namespace with classes that really should be
component specific. In addition to the benefits mentioned in the
presentation, inline styles allow Material-UI to become CSS preprocessor
agnostic and make Themeing much more dynamic and simple.
Read our CSS in JS discussion - Upgrade path:
- If you are overriding component CSS classes: Redefine your overrides as
an object following React's inline styles format,
then pass it into the material-ui component via thestyleprop. These
changes are applied to the root element of the component. If you are
overriding a nested element of the component, check the component's
documentation and see if there is a style prop available for that nested
element. If a style prop does not exist for the component's nested element
that you are trying to override, submit an issue
requesting to have it added. - If you are using any of Material-UI's Less files: These files have been
refactored into their own javascript files
and can be accessed like sovar FILENAME = require('material-ui').Styles.FILENAME;.
Material-UI has moved away from being a CSS Framework to being simply a
set of React components.
- If you are overriding component CSS classes: Redefine your overrides as
- All Material-UI components now have their styles defined inline. This solves
- Paper component no longer generates nested divs (#601)
- This allowed us to simplify styling of paper containers. As a result, styling the inner div is no longer necessary.
General
- Themes have been added (#202)
- Requiring individual components is now supported (#363)
- An example would be:
var SvgIcon = require('material-ui/lib/svg-icon); - The
/libfolder in Material-UI contains the file structure needed when referencing individual components.
- An example would be: