How to use the @material-ui/core/styles.withStyles function in @material-ui/core

placeholder="Insert Introspection Result Here"
                  onChange={handleUpload}
                />
                <button> { changeSchema(currentSchema, uploadedText); handleClose(); handleSelectedSchema(); clearGraph(); renderNode(); }}&gt;
                  Visualize Schema
                </button>
              
            
          
        
      
    );
  }
}
// material ui - wrapping modal container with the material ui styling
const SimpleModalWrapped = withStyles(styles)(ModalContainer);

export default connect(mapStateToProps, mapDispatchToProps)(SimpleModalWrapped);

},
    right: {
      textAlign: 'right',
    },
  });

// TODO Use connect to get coinlist, ticker and settings
interface Props extends WithStyles {
  asset: string;
  coinlist: Coinlist;
  ticker: Ticker;
  portfolio: PortfolioForAsset;
  settings: SettingsType;
}

export const PortfolioPosition = withStyles(styles)(
  ({ asset, classes, portfolio, coinlist, ticker, settings }: Props) => {
    const quantity = portfolio.total;
    const tickerEntries = getTickerEntries(ticker, asset, [
      settings.cryptoCurrency,
      settings.fiatCurrency,
    ]);

    return (

{title}
      
    )
  } else {
    return (
      
        <span>
        { icon }
        </span>
      
    )
  }
}

registerComponent('BookmarkButton', BookmarkButton, withUser, withErrorBoundary, withStyles(styles, {name:"BookmarkButton"}), withDialog);

},
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor,
        orderBy: fragmentVariables.orderBy,
        orderMode: fragmentVariables.orderMode,
      };
    },
    query: addCoursesOfActionLinesQuery,
  },
);

export default compose(
  inject18n,
  withStyles(styles),
)(AddCoursesOfActionLines);

}
}

EnvironmentPanel.defaultProps = {};

EnvironmentPanel.propTypes = {
    environment: PropTypes.shape({
        label: PropTypes.string,
    }).isRequired,
    rootAPI: PropTypes.shape({
        name: PropTypes.string,
    }).isRequired,
    classes: PropTypes.shape({}).isRequired,
};

export default withStyles(styles)(EnvironmentPanel);

};

const mapStateToProps = (state, ownProps) => ({
  favourite: isFavouriteSelector(state, ownProps),
  favourites: state.favourites,
  allGlasses: allGlassesSelector(state)
});

const mapDispatchToProps = dispatch => ({
  updateFavourites: bindActionCreators(updateFavourites, dispatch)
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(CocktailItem));

<b>Send and Receive Requests</b>
          
          <br>
          <div>
            
          </div>
        
      
    );
  }
}
const styledComponent = withStyles(styles)(SentReceived);
const MapStateToProp = state =&gt; {
  return {
    projectLog: state.log.projectLogArr,
    user: state.auth.user,
    project: state.project.SelectedProject
  };
};

export default connect(
  MapStateToProp,
  { fetchProjectBasedLog }
)(styledComponent);

showEpConfigSlide={this.state.showEpConfigSlide}
                                    />
                                
                            )}
                        
                    
                
            
        );
    }
}
EndpointDetail.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(EndpointDetail);

spacing={40}
        direction="row"
        justify="flex-start"
        alignItems="center"
      >
        {this.renderVideoPlayers(this.state.videos)}
      
    );
  }
}

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

export default withStyles(styles)(VideoFeed);

<map>
                    {this.props.children}
                  </map>
                
              
              
            
          )}
        
      
    );
  }
}

export default withStyles(styles)(DefaultTemplate)