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

function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  }
}
// Receive
const dropTarget = {
  drop(props, monitor) {
    props.itemDropped(monitor.getItem().kanbanId, props.columnKey)
  }
}

export default compose(
  DropTarget('card', dropTarget, collect),
  withStyles(styles)
)(Column)

<button style="{{" color="primary">Login</button>
      
    

    {/* Auth Check */}
    
  
)

// Component Properties
Home.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(Home)

<button color="{'primary'}">
        Back to Home
      </button>
    
  
)

// Component Properties
NotFound.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(NotFound)

);
  }
}

StixObservablePopover.propTypes = {
  stixObservableId: PropTypes.string,
  classes: PropTypes.object,
  t: PropTypes.func,
  history: PropTypes.object,
};

export default compose(
  inject18n,
  withRouter,
  withStyles(styles),
)(StixObservablePopover);

);
  }
}

ThreatActorPopover.propTypes = {
  id: PropTypes.string,
  paginationOptions: PropTypes.object,
  classes: PropTypes.object,
  t: PropTypes.func,
  history: PropTypes.object,
};

export default compose(
  inject18n,
  withRouter,
  withStyles(styles),
)(ThreatActorPopover);

return ;
          }}
        />
      
    );
  }
}

Profile.propTypes = {
  classes: PropTypes.object,
  t: PropTypes.func,
};

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

{...other}
		/>
	)
}

const { bool, func, node, object, oneOf, oneOfType, string } = PropTypes

CustomSnackbarContent.propTypes = {
	classes: object.isRequired,
	className: string,
	onClose: func,
	message: oneOfType([string, node]),
	variant: oneOf(['success', 'warning', 'error', 'info'])
}

const StyledCustomSnackbarContent = withStyles(styles1)(CustomSnackbarContent)


const styles2 = theme => ({
	margin: {
		flexGrow: 0,
		margin: theme.spacing.unit,
		fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
	},
	button: {
		padding: theme.spacing.unit / 2
	}
})

function Notification( props ) {
	const { classes } = props
	const msg = props.message || 'Please fix the errors shown.'

);
  }
}

RegionPopover.propTypes = {
  id: PropTypes.string,
  classes: PropTypes.object,
  t: PropTypes.func,
  history: PropTypes.object,
};

export default compose(
  inject18n,
  withRouter,
  withStyles(styles),
)(RegionPopover);

}

DialogCron.propTypes = {
    classes: PropTypes.object,
    onClose: PropTypes.func,
    onOk: PropTypes.func.isRequired,
    title: PropTypes.string,
    cron: PropTypes.string,
    cancel: PropTypes.string,
    ok: PropTypes.string,
    simple: PropTypes.bool,
    language: PropTypes.string

};

export default withStyles(styles)(DialogCron);

fragment ConnectorsStatus_data on Query {
        connectors {
          id
          name
          active
          connector_type
          connector_scope
          updated_at
        }
      }
    `,
  },
  connectorsStatusQuery,
);

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