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

import cx from 'classnames'
import PT from 'prop-types'
import * as React from 'react'
import * as RC from 'recompose'
import { withStyles } from '@material-ui/styles'

import * as RT from 'utils/reactTools'

const DataFrame = RT.composeComponent(
  'Preview.renderers.DataFrame',
  RC.setPropTypes({
    children: PT.string,
    className: PT.string,
  }),
  withStyles(({ palette, spacing: { unit } }) => ({
    root: {
      width: '100%',
    },
    wrapper: {
      overflow: 'auto',

      '& table.dataframe': {
        border: 'none',
        minWidth: '100%',
        width: 'auto',

        '& tr:nth-child(even)': {
          backgroundColor: palette.grey[100],
        },

        '& th, & td': {

return (
      <div>
        <span>Success</span> <br>
        <span>{tsFormatter(props.txTimestamp)}</span>
      </div>
    );
  }

  return null;
};

function defaultTimestampFormatter (timestamp: any): string {
  return timestamp;
}

export default withStyles(styles)(Status);

const mapStateToProps = state => ({
    flows: state.flows,
});
const mapDispatchToProps = dispatch => bindActionCreators({
    getFlows,
    createFlow,
    getFlowsPage,
}, dispatch);

export default flow(
    connect(
        mapStateToProps,
        mapDispatchToProps,
    ),
    withStyles(useStyles),
)(Flows);

renderView={props =&gt; <div>}
    className={classes.container}&gt;
    <div>
      <header>
      
        <main>{children}</main>
      
    </header></div>
  
);

export default withStyles(styles)(Layout);
</div>

);
};

TableToolbar.propTypes = {
    classes: PropTypes.object.isRequired,
    numSelected: PropTypes.number.isRequired,
};

export default withStyles(toolbarStyles)(TableToolbar);

<li>
                <button>Cadastrar</button>
              </li>
            
            <div class="burger">
              <div class="line1">
              <div class="line2">
              <div class="line3">
            </div>
          </div>
        
      </div>
    );
  }
}
export default withStyles(styles)(Navbar);
</div>

this.handleUpdate(data, error)
                  return (<button color="{this.state.update" size="large"> updateGlobalVariable(this.makeGlobalVariable())}&gt;
                    Save Config
                  </button>)
                }}
              
            )
        }}
      
    )
  }
}

export default withStyles(styles)(GlobalVariable)

{props.children}
    
  );
});
H3.displayName = "H3";

export const H4 = withStyles(styles)((props: LabelProps) => {
  return (
    <label>
      {props.children}
    </label>
  );
});
H4.displayName = "H4";

export const H5 = withStyles(styles)((props: LabelProps) =&gt; {
  return (
    <label>
      {props.children}
    </label>
  );
});
H5.displayName = "H5";

export const H6 = withStyles(styles)((props: LabelProps) =&gt; {
  return (
    <label>
      {props.children}
    </label>
  );
});
H6.displayName = "H6";

);
  }
}
export default withStyles(styles)(PaletteList);

interface JobMetadataItemProps extends WithStyles {
    label: string
    title?: string
    xs?: 1|2|3|4|5|6|7|8|9
}

class JobMetadataItemPropsImpl extends React.Component {
    render() {
        return 
            <span title="{this.props.title}">{this.props.label}</span>
            {this.props.children}
        
    }
}

const JobMetadataItemProps = withStyles(styles)(JobMetadataItemPropsImpl);