.root

js
// Basic widget component
class Widget extends Component {
  render() {
    return <div className={`widget ${ this.props.className }`}>{this.props.children}</div>;
  }

  // Widget functionality
  // ...
};

// This widget component will include the resizable functionality
class Resizable extends Component {
  render() {
    return <Widget className="resizable">I am a widget that has resizable functionality</Widget>
  }

  //Resiazable functionality
  // ...
}

// This widget component will include the draggable functionality
class Draggable extends Component {
  render() {
    return <Widget className="draggable">I am a widget that has draggable functionality</Widget>
  }

  // Draggable functionality
  // ...
}

// This widget component needs to reuse the resizable and draggable functionality of "Resizable" AND "Draggable"
class Window extends Component {
  render() {
    return <Widget className="window">I am a widget that needs draggable and resizable functionality</Widget>
  }

  // Window functionality
  //
}

// This widget component needs to reuse the resizable and draggable functionality of "Resizable" AND "Draggable" and window functionality of "Window"
class App extends Component {
  render() {
    return <Widget className="app">I am a widget just like window, but with extra functionality for App</Widget>
  }

  // App functionality
  // ...
};

mui.core.styles.Styles.mergeJss({ ... },  theme.mixins.toolbar)