<p dir="auto">I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">for change color and position of tab indicator (ink bar) in tabs haven't props or classes or another parameter. I search my problem on issues and  StackOverflow but not find a solution for this.</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.30</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">Possibly related:<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="260046862" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8353" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8353/hovercard" href="https://github.com/mui/material-ui/issues/8353">#8353</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="269211243" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8878" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8878/hovercard" href="https://github.com/mui/material-ui/issues/8878">#8878</a></p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Whenever I change a value in my const styles = theme =&gt; ({..}) in Drawer (or anything else in the application), material-ui withStyles should not throw an error.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Anytime I change a value in my styles definition (or anything for that matter), after a hot module replacement, the following error occurs. The UI still updates as expected, but the errors start stacking up.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'refs' of undefined
    at ProxyComponent.detach (withStyles.js:339)
    at ProxyComponent.detach (createPrototypeProxy.js:44)
    at ProxyComponent.&lt;anonymous&gt; (withStyles.js:251)
    at commitCallbacks (react-dom.development.js:6155)
    at commitLifeCycles (react-dom.development.js:8812)
    at commitAllLifeCycles (react-dom.development.js:9967)
    at HTMLUnknownElement.callCallback (react-dom.development.js:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
    at invokeGuardedCallback (react-dom.development.js:436)
    at commitRoot (react-dom.development.js:10071)"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'refs' of undefined
    at ProxyComponent.detach (withStyles.js:339)
    at ProxyComponent.detach (createPrototypeProxy.js:44)
    at ProxyComponent.&lt;anonymous&gt; (withStyles.js:251)
    at commitCallbacks (react-dom.development.js:6155)
    at commitLifeCycles (react-dom.development.js:8812)
    at commitAllLifeCycles (react-dom.development.js:9967)
    at HTMLUnknownElement.callCallback (react-dom.development.js:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
    at invokeGuardedCallback (react-dom.development.js:436)
    at commitRoot (react-dom.development.js:10071)
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="react-dom.development.js:9769 The above error occurred in the &lt;withStyles(ResponsiveDrawer)&gt; component:
    in withStyles(ResponsiveDrawer) (created by App)
    in MuiThemeProvider (created by MuiThemeProviderWrapper)
    in MuiThemeProviderWrapper (created by App)
    in App
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in Provider
    in AppContainer"><pre class="notranslate"><code class="notranslate">react-dom.development.js:9769 The above error occurred in the &lt;withStyles(ResponsiveDrawer)&gt; component:
    in withStyles(ResponsiveDrawer) (created by App)
    in MuiThemeProvider (created by MuiThemeProviderWrapper)
    in MuiThemeProviderWrapper (created by App)
    in App
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in Provider
    in AppContainer
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Cannot read property 'refs' of undefined
    at ProxyComponent.detach (withStyles.js:339)
    at ProxyComponent.detach (createPrototypeProxy.js:44)
    at ProxyComponent.&lt;anonymous&gt; (withStyles.js:251)
    at commitCallbacks (react-dom.development.js:6155)
    at commitLifeCycles (react-dom.development.js:8812)
    at commitAllLifeCycles (react-dom.development.js:9967)
    at HTMLUnknownElement.callCallback (react-dom.development.js:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
    at invokeGuardedCallback (react-dom.development.js:436)
    at commitRoot (react-dom.development.js:10071)"><pre class="notranslate"><code class="notranslate">Cannot read property 'refs' of undefined
    at ProxyComponent.detach (withStyles.js:339)
    at ProxyComponent.detach (createPrototypeProxy.js:44)
    at ProxyComponent.&lt;anonymous&gt; (withStyles.js:251)
    at commitCallbacks (react-dom.development.js:6155)
    at commitLifeCycles (react-dom.development.js:8812)
    at commitAllLifeCycles (react-dom.development.js:9967)
    at HTMLUnknownElement.callCallback (react-dom.development.js:540)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
    at invokeGuardedCallback (react-dom.development.js:436)
    at commitRoot (react-dom.development.js:10071)
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Unfortunately this is a HMR issue, and I can't workup a codesandbox.io example. Here is my relevant setup (maybe I am doing something wrong?)</p>
<p dir="auto">Steps</p>
<ol dir="auto">
<li>Build / Run</li>
<li>Modify any part of app under the hot.module.accept (styles, content, etc...)</li>
<li>Error occurs but UI updates OK (the UI still updates fine - but the error is still thrown)</li>
</ol>
<p dir="auto"><strong>App.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import ReactDOM from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import purple from 'material-ui/colors/purple';
import blue from 'material-ui/colors/blue';
import green from 'material-ui/colors/green';
import red from 'material-ui/colors/red';

import Drawer from '../Drawer';
import DevTools from '../DevTools';

const theme = createMuiTheme({
  palette: {
    primary: green, // Purple and green play nicely together.
    secondary: {
      ...green,
      A400: '#00e677',
    },
    error: red,
  },
  overrides: {
    MuiDrawer: {
      docked: {
        flex: '0 0 auto',
        height: '100%'
      }
    }
  }
});

class App extends React.Component {
  render() {
    return (
        &lt;MuiThemeProvider theme={theme}&gt;
          &lt;Drawer /&gt;
        &lt;/MuiThemeProvider&gt;
    );
  }
}
export default App;"><pre class="notranslate"><code class="notranslate">import React from 'react';
import ReactDOM from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import purple from 'material-ui/colors/purple';
import blue from 'material-ui/colors/blue';
import green from 'material-ui/colors/green';
import red from 'material-ui/colors/red';

import Drawer from '../Drawer';
import DevTools from '../DevTools';

const theme = createMuiTheme({
  palette: {
    primary: green, // Purple and green play nicely together.
    secondary: {
      ...green,
      A400: '#00e677',
    },
    error: red,
  },
  overrides: {
    MuiDrawer: {
      docked: {
        flex: '0 0 auto',
        height: '100%'
      }
    }
  }
});

class App extends React.Component {
  render() {
    return (
        &lt;MuiThemeProvider theme={theme}&gt;
          &lt;Drawer /&gt;
        &lt;/MuiThemeProvider&gt;
    );
  }
}
export default App;
</code></pre></div>
<p dir="auto"><strong>Drawer.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List from 'material-ui/List';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import Hidden from 'material-ui/Hidden';
import Divider from 'material-ui/Divider';
import MenuIcon from 'material-ui-icons/Menu';
import Grid from 'material-ui/Grid';
import Paper from 'material-ui/Paper';
import { mailFolderListItems, otherMailFolderListItems } from './tileData';

const drawerWidth = 240;

const styles = theme =&gt; ({
  root: {
    width: '100%',
    marginTop: 4,
    zIndex: 1,
    height: '100%',
    overflow: 'hidden',
  },
  appFrame: {
    position: 'relative',
    display: 'flex',
    width: '100%',
    height: '100%',
  },
  appBar: {
    position: 'absolute',
    marginLeft: drawerWidth,
    [theme.breakpoints.up('md')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  navIconHide: {
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  },
  drawerHeader: theme.mixins.toolbar,
  drawerPaper: {
    width: 250,
    height: '100%',
    [theme.breakpoints.up('md')]: {
      width: drawerWidth,
      position: 'relative',
      height: '100%',
    },
  },
  content: {
    backgroundColor: theme.palette.background.default,
    width: '100%',
    padding: theme.spacing.unit * 3, 
    height: 'calc(100% - 56px)',
    marginTop: 56,
    [theme.breakpoints.up('sm')]: {
      height: 'calc(100% - 64px)',
      marginTop: 64,
    },
  },
  gridRoot: {
    flexGrow: 1
  },
  gridPaper: {
    padding: theme.spacing.unit * 2,
    height: '100%'
  },
  docked: {
    height: '100%'
  }
});

class ResponsiveDrawer extends React.Component {
  state = {
    mobileOpen: false,
  };

  handleDrawerToggle = () =&gt; {
    this.setState({ mobileOpen: !this.state.mobileOpen });
  };

  render() {
    const { classes, theme } = this.props;

    const drawer = (
      &lt;div&gt;
        &lt;div className={classes.drawerHeader} /&gt;
        &lt;Divider /&gt;
        &lt;List&gt;{mailFolderListItems}&lt;/List&gt;
        &lt;Divider /&gt;
        &lt;List&gt;{otherMailFolderListItems}&lt;/List&gt;
      &lt;/div&gt;
    );

    return (
      &lt;div className={classes.root}&gt;
        &lt;div className={classes.appFrame}&gt;
          &lt;AppBar className={classes.appBar}&gt;
            &lt;Toolbar&gt;
              &lt;IconButton
                color=&quot;contrast&quot;
                aria-label=&quot;open drawer&quot;
                onClick={this.handleDrawerToggle}
                className={classes.navIconHide}
              &gt;
                &lt;MenuIcon /&gt;
              &lt;/IconButton&gt;
              &lt;Typography type=&quot;title&quot; color=&quot;inherit&quot; noWrap&gt;
                Responsive drawer
              &lt;/Typography&gt;
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
          
          &lt;Hidden mdUp&gt;
            &lt;Drawer
              type=&quot;temporary&quot;
              anchor={theme.direction === 'rtl' ? 'right' : 'left'}
              open={this.state.mobileOpen}
              classes={{
                paper: classes.drawerPaper,
              }}
              onRequestClose={this.handleDrawerToggle}
              ModalProps={{
                keepMounted: true, // Better open performance on mobile.
              }}
            &gt;
              {drawer}
            &lt;/Drawer&gt;
          &lt;/Hidden&gt;
          &lt;Hidden mdDown implementation=&quot;css&quot;&gt;
            &lt;Drawer
              type=&quot;permanent&quot;
              open
              classes={{
                docked: classes.docked,
                paper: classes.drawerPaper,
              }}
            &gt;
              {drawer}
            &lt;/Drawer&gt;
          &lt;/Hidden&gt;
          &lt;main className={classes.content}&gt;
              &lt;Grid container className={classes.gridRoot}&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;Grid container alignItems='stretch'&gt;
                    &lt;Grid item key={1}&gt;
                      &lt;Paper className={classes.gridPaper}&gt;
                        {'Content 1'}
                      &lt;/Paper&gt;
                    &lt;/Grid&gt;
                    &lt;Grid item key={2}&gt;
                      &lt;Paper className={classes.gridPaper}&gt;
                        {'Content 2'}
                      &lt;/Paper&gt;
                    &lt;/Grid&gt;
                    &lt;Grid item key={3}&gt;
                      &lt;Paper className={classes.gridPaper}&gt;
                        {'Content 3'}
                      &lt;/Paper&gt;
                    &lt;/Grid&gt;
                  &lt;/Grid&gt;
                  
                &lt;/Grid&gt;
              &lt;/Grid&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}

ResponsiveDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);"><pre class="notranslate"><code class="notranslate">import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List from 'material-ui/List';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import Hidden from 'material-ui/Hidden';
import Divider from 'material-ui/Divider';
import MenuIcon from 'material-ui-icons/Menu';
import Grid from 'material-ui/Grid';
import Paper from 'material-ui/Paper';
import { mailFolderListItems, otherMailFolderListItems } from './tileData';

const drawerWidth = 240;

const styles = theme =&gt; ({
  root: {
    width: '100%',
    marginTop: 4,
    zIndex: 1,
    height: '100%',
    overflow: 'hidden',
  },
  appFrame: {
    position: 'relative',
    display: 'flex',
    width: '100%',
    height: '100%',
  },
  appBar: {
    position: 'absolute',
    marginLeft: drawerWidth,
    [theme.breakpoints.up('md')]: {
      width: `calc(100% - ${drawerWidth}px)`,
    },
  },
  navIconHide: {
    [theme.breakpoints.up('md')]: {
      display: 'none',
    },
  },
  drawerHeader: theme.mixins.toolbar,
  drawerPaper: {
    width: 250,
    height: '100%',
    [theme.breakpoints.up('md')]: {
      width: drawerWidth,
      position: 'relative',
      height: '100%',
    },
  },
  content: {
    backgroundColor: theme.palette.background.default,
    width: '100%',
    padding: theme.spacing.unit * 3, 
    height: 'calc(100% - 56px)',
    marginTop: 56,
    [theme.breakpoints.up('sm')]: {
      height: 'calc(100% - 64px)',
      marginTop: 64,
    },
  },
  gridRoot: {
    flexGrow: 1
  },
  gridPaper: {
    padding: theme.spacing.unit * 2,
    height: '100%'
  },
  docked: {
    height: '100%'
  }
});

class ResponsiveDrawer extends React.Component {
  state = {
    mobileOpen: false,
  };

  handleDrawerToggle = () =&gt; {
    this.setState({ mobileOpen: !this.state.mobileOpen });
  };

  render() {
    const { classes, theme } = this.props;

    const drawer = (
      &lt;div&gt;
        &lt;div className={classes.drawerHeader} /&gt;
        &lt;Divider /&gt;
        &lt;List&gt;{mailFolderListItems}&lt;/List&gt;
        &lt;Divider /&gt;
        &lt;List&gt;{otherMailFolderListItems}&lt;/List&gt;
      &lt;/div&gt;
    );

    return (
      &lt;div className={classes.root}&gt;
        &lt;div className={classes.appFrame}&gt;
          &lt;AppBar className={classes.appBar}&gt;
            &lt;Toolbar&gt;
              &lt;IconButton
                color="contrast"
                aria-label="open drawer"
                onClick={this.handleDrawerToggle}
                className={classes.navIconHide}
              &gt;
                &lt;MenuIcon /&gt;
              &lt;/IconButton&gt;
              &lt;Typography type="title" color="inherit" noWrap&gt;
                Responsive drawer
              &lt;/Typography&gt;
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
          
          &lt;Hidden mdUp&gt;
            &lt;Drawer
              type="temporary"
              anchor={theme.direction === 'rtl' ? 'right' : 'left'}
              open={this.state.mobileOpen}
              classes={{
                paper: classes.drawerPaper,
              }}
              onRequestClose={this.handleDrawerToggle}
              ModalProps={{
                keepMounted: true, // Better open performance on mobile.
              }}
            &gt;
              {drawer}
            &lt;/Drawer&gt;
          &lt;/Hidden&gt;
          &lt;Hidden mdDown implementation="css"&gt;
            &lt;Drawer
              type="permanent"
              open
              classes={{
                docked: classes.docked,
                paper: classes.drawerPaper,
              }}
            &gt;
              {drawer}
            &lt;/Drawer&gt;
          &lt;/Hidden&gt;
          &lt;main className={classes.content}&gt;
              &lt;Grid container className={classes.gridRoot}&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;Grid container alignItems='stretch'&gt;
                    &lt;Grid item key={1}&gt;
                      &lt;Paper className={classes.gridPaper}&gt;
                        {'Content 1'}
                      &lt;/Paper&gt;
                    &lt;/Grid&gt;
                    &lt;Grid item key={2}&gt;
                      &lt;Paper className={classes.gridPaper}&gt;
                        {'Content 2'}
                      &lt;/Paper&gt;
                    &lt;/Grid&gt;
                    &lt;Grid item key={3}&gt;
                      &lt;Paper className={classes.gridPaper}&gt;
                        {'Content 3'}
                      &lt;/Paper&gt;
                    &lt;/Grid&gt;
                  &lt;/Grid&gt;
                  
                &lt;/Grid&gt;
              &lt;/Grid&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
}

ResponsiveDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
</code></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">If I remove MuiThemeProvider from App.js, all works as expected with the default theme.</p>
<p dir="auto">Doing some debugging, it looks like this line, at some point returns undefined / null:</p>
<p dir="auto">var sheetManagerTheme = sheetManager.get(theme)<br>
<a href="https://github.com/mui-org/material-ui/blob/023fee9092571e98814e64221015c6b669353fbe/src/styles/withStyles.js#L267">https://github.com/mui-org/material-ui/blob/023fee9092571e98814e64221015c6b669353fbe/src/styles/withStyles.js#L267</a></p>
<p dir="auto">in the detach method.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>^1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome latest</td>
</tr>
</tbody>
</table>