diff --git a/docs/src/pages/customization/css-in-js/css-in-js.md b/docs/src/pages/customization/css-in-js/css-in-js.md index 4572acd426fa35..bf950cbdd2bfcd 100644 --- a/docs/src/pages/customization/css-in-js/css-in-js.md +++ b/docs/src/pages/customization/css-in-js/css-in-js.md @@ -248,7 +248,7 @@ For instance, it can be used to defined a `getInitialProps()` static method (nex #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or an object. +1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `options` (*Object* [optional]): diff --git a/packages/material-ui/src/styles/getStylesCreator.js b/packages/material-ui/src/styles/getStylesCreator.js index c5e2703ff29fda..710f526750aec1 100644 --- a/packages/material-ui/src/styles/getStylesCreator.js +++ b/packages/material-ui/src/styles/getStylesCreator.js @@ -9,6 +9,14 @@ function arrayMerge(destination, source) { function getStylesCreator(stylesOrCreator) { const themingEnabled = typeof stylesOrCreator === 'function'; + warning( + typeof stylesOrCreator === 'object' || themingEnabled, + [ + 'Material-UI: the first argument provided to withStyles() is invalid.', + 'You need to provide a function generating the styles or a styles object.', + ].join('\n'), + ); + function create(theme, name) { const styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;