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

import { withTheme } from '@material-ui/styles';

function SimpleLineChart(props) {
  const { theme, data, threshold } = props;
  return (
    
      
        
        
        
      
    
  );
}

export default withTheme(SimpleLineChart);

// 

name="location"
        label="Company Location"
        type="text"
        component={TextField}
        fullWidth
        InputProps={{
          inputRef: ref,
          ...InputProps,
        }}
        {...other}
      />
    
  );
}

export default withTheme(GoogleEnhancedAutocomplete);

name="location"
        label="Company Location"
        type="text"
        component={TextField}
        fullWidth
        InputProps={{
          inputRef: ref,
          ...InputProps,
        }}
        {...other}
      />
    
  );
}

export default withTheme(GoogleEnhancedAutocomplete);

import { withTheme } from '@material-ui/styles';
import * as React from 'react';

const EmeraldTitle = ({ theme }: {theme: any}) => {
  return (
    <div style="{{">
      <span style="{{">Emerald </span>
      <span style="{{">Wallet</span>
    </div>
  );
};

export default withTheme(EmeraldTitle);

anchorEl={anchorEl}
          onClose={this.handleClose}
        >
          {blockchains.map((net) => )}
        
      
    );
  }
}

export default withStyles(selectorStyles)(withTheme(NetworkSelectorRender));

import React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider, withTheme } from '@material-ui/styles';

function DeepChildRaw(props) {
  return <span>{`spacing ${props.theme.spacing}`}</span>;
}

DeepChildRaw.propTypes = {
  theme: PropTypes.shape({
    spacing: PropTypes.string.isRequired,
  }).isRequired,
};

const DeepChild = withTheme(DeepChildRaw);

function WithTheme() {
  return (
    
      
    
  );
}

export default WithTheme;

return (
       {          
          if (!props.visible) {
            return null;
          }
          const icon = props.direction === 'left' ? 'chevron_left' : 'chevron_right';
          return 
        }}
        {...tabsProps}        
      />
    )
  }
}
export const WTabs = withTheme(WTabsInner);
export * from './w-tab';

return ;
        }
        if ((data && data.length === 0) || !data) {
            return ;
        }
        return (
            
                
            
        );
    }
}

ApiTableView.contextType = ApiContext;

export default withSettings(injectIntl(withTheme(withStyles(styles)(ApiTableView))));