search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.64k stars 32.22k forks source link

Spread style object and withStyles function fails #17576

Closed marcopgordillo closed 5 years ago

marcopgordillo commented 5 years ago

Until v3.9.2 I can add a function like:

const styles = (theme) => ({
  ...theme
});

Now I can't with versions 4.x.x

Current Behavior 😯

Until v3.9.2 I can add a function like:

const styles = (theme) => ({
  ...theme
});

Now I can't with versions 4.x.x

To import the styles from my theme defined in App.js with:

const theme = createMuiTheme(themeObject);

where themeObject is something like:

export default {
  palette: {
    primary: {
      light: '#33c9dc',
      main: '#00bcd4',
      dark: '#008394',
      contrastText: '#fff'
    },
    secondary: {
      light: '#ff6333',
      main: '#ff3d00',
      dark: '#b22a00',
      contrastText: '#fff'
    }
  },
  typography: {
    useNextVariants: true
  },
  form: {
    textAlign: 'center'
  },
......

When I try with versions 4.x.x I get the following error:

Uncaught TypeError: color.charAt is not a function
    at decomposeColor (colorManipulator.js:148)
    at getLuminance (colorManipulator.js:222)
    at getContrastRatio (colorManipulator.js:206)
    at Object.getContrastText (createPalette.js:138)
    at Array.onUpdate (jss-plugin-rule-value-function.esm.js:48)
    at PluginsRegistry.onUpdate (jss.esm.js:1266)
    at RuleList.onUpdate (jss.esm.js:955)
    at RuleList.update (jss.esm.js:930)
    at StyleSheet.update (jss.esm.js:1182)
    at attach (makeStyles.js:119)
    at makeStyles.js:234
    at useSynchronousEffect (makeStyles.js:187)
    at makeStyles.js:226
    at WithStyles (withStyles.js:52)
    at renderWithHooks (react-dom.development.js:15821)
    at updateForwardRef (react-dom.development.js:17509)
    at beginWork$1 (react-dom.development.js:19406)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:24570)
    at performUnitOfWork (react-dom.development.js:23502)
    at workLoopSync (react-dom.development.js:23480)
    at renderRoot (react-dom.development.js:23155)
    at scheduleUpdateOnFiber (react-dom.development.js:22653)
    at scheduleRootUpdate (react-dom.development.js:25686)
    at updateContainerAtExpirationTime (react-dom.development.js:25712)
    at updateContainer (react-dom.development.js:25812)
    at react-dom.development.js:26370
    at unbatchedUpdates (react-dom.development.js:22952)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26369)
    at Object.render (react-dom.development.js:26460)
    at Module../src/index.js (index.js:6)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (theme.js:1)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
decomposeColor @ colorManipulator.js:148
getLuminance @ colorManipulator.js:222
getContrastRatio @ colorManipulator.js:206
getContrastText @ createPalette.js:138
onUpdate @ jss-plugin-rule-value-function.esm.js:48
onUpdate @ jss.esm.js:1266
onUpdate @ jss.esm.js:955
update @ jss.esm.js:930
update @ jss.esm.js:1182
attach @ makeStyles.js:119
(anonymous) @ makeStyles.js:234
useSynchronousEffect @ makeStyles.js:187
(anonymous) @ makeStyles.js:226
WithStyles @ withStyles.js:52
renderWithHooks @ react-dom.development.js:15821
updateForwardRef @ react-dom.development.js:17509
beginWork$1 @ react-dom.development.js:19406
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
beginWork$$1 @ react-dom.development.js:24570
performUnitOfWork @ react-dom.development.js:23502
workLoopSync @ react-dom.development.js:23480
renderRoot @ react-dom.development.js:23155
scheduleUpdateOnFiber @ react-dom.development.js:22653
scheduleRootUpdate @ react-dom.development.js:25686
updateContainerAtExpirationTime @ react-dom.development.js:25712
updateContainer @ react-dom.development.js:25812
(anonymous) @ react-dom.development.js:26370
unbatchedUpdates @ react-dom.development.js:22952
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26369
render @ react-dom.development.js:26460
./src/index.js @ index.js:6
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ theme.js:1
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 10 more frames
index.js:1375 The above error occurred in the <WithStyles(Signup)> component:
    in WithStyles(Signup) (created by Context.Consumer)
    in Route (at App.js:35)
    in Switch (at App.js:32)
    in div (at App.js:30)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:29)
    in div (at App.js:28)
    in ThemeProvider (at App.js:27)
    in App (at src/index.js:6)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1375
logCapturedError @ react-dom.development.js:20888
logError @ react-dom.development.js:20924
update.callback @ react-dom.development.js:22134
callCallback @ react-dom.development.js:13541
commitUpdateEffects @ react-dom.development.js:13581
commitUpdateQueue @ react-dom.development.js:13571
commitLifeCycles @ react-dom.development.js:21199
commitLayoutEffects @ react-dom.development.js:24138
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
commitRootImpl @ react-dom.development.js:23903
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
commitRoot @ react-dom.development.js:23723
scheduleUpdateOnFiber @ react-dom.development.js:22656
scheduleRootUpdate @ react-dom.development.js:25686
updateContainerAtExpirationTime @ react-dom.development.js:25712
updateContainer @ react-dom.development.js:25812
(anonymous) @ react-dom.development.js:26370
unbatchedUpdates @ react-dom.development.js:22952
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26369
render @ react-dom.development.js:26460
./src/index.js @ index.js:6
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ theme.js:1
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 2 more frames
colorManipulator.js:148 Uncaught TypeError: color.charAt is not a function
    at decomposeColor (colorManipulator.js:148)
    at getLuminance (colorManipulator.js:222)
    at getContrastRatio (colorManipulator.js:206)
    at Object.getContrastText (createPalette.js:138)
    at Array.onUpdate (jss-plugin-rule-value-function.esm.js:48)
    at PluginsRegistry.onUpdate (jss.esm.js:1266)
    at RuleList.onUpdate (jss.esm.js:955)
    at RuleList.update (jss.esm.js:930)
    at StyleSheet.update (jss.esm.js:1182)
    at attach (makeStyles.js:119)
    at makeStyles.js:234
    at useSynchronousEffect (makeStyles.js:187)
    at makeStyles.js:226
    at WithStyles (withStyles.js:52)
    at renderWithHooks (react-dom.development.js:15821)
    at updateForwardRef (react-dom.development.js:17509)
    at beginWork$1 (react-dom.development.js:19406)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:24570)
    at performUnitOfWork (react-dom.development.js:23502)
    at workLoopSync (react-dom.development.js:23480)
    at renderRoot (react-dom.development.js:23155)
    at scheduleUpdateOnFiber (react-dom.development.js:22653)
    at scheduleRootUpdate (react-dom.development.js:25686)
    at updateContainerAtExpirationTime (react-dom.development.js:25712)
    at updateContainer (react-dom.development.js:25812)
    at react-dom.development.js:26370
    at unbatchedUpdates (react-dom.development.js:22952)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26369)
    at Object.render (react-dom.development.js:26460)
    at Module../src/index.js (index.js:6)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (theme.js:1)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Expected Behavior 🤔

That in versions 4.x.x we can add spread functions of objects like styles.

Steps to Reproduce 🕹

You can review the code at: https://codesandbox.io/s/github/marcopgordillo/socialape-client

Steps:

  1. put a version of @material-ui/core like 4.4.3 (4.x.x)
  2. Define a theme in App.js (line 17)
  3. In a page like login.js call a function styles (line 15) and the function withStyles to the Component (line 130).
  4. Run the project and open the browser.

Context 🔦

It affects me because I want to centralize the styles.

Your Environment 🌎

Only I test in development.

Tech Version
Material-UI v4.x.x
React v16.9.2
Browser chrome 77
marcopgordillo commented 5 years ago

With @material-ui/core v3.9.2 that works ok. The problem is with versions 4.x.x

oliviertassinari commented 5 years ago

You are import private modules, e.g. '@material-ui/core/styles/createMuiTheme'. Import from the root module or the first levet, not deeper.

marcopgordillo commented 5 years ago

Hi I've imported as @oliviertassinari said but the problem persists.

https://codesandbox.io/s/github/marcopgordillo/socialape-client

oliviertassinari commented 5 years ago

@marcopgordillo You have another problem: TypeError: this.state.screams.map is not a function. For support requests, please got to StackOverflow.