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

font-weight: 700;
  margin-right: 8px;  // space between candidate name and description
  margin-bottom: 8px;
  vertical-align: middle;
  white-space: ${isCordova() ? 'nowrap' : 'normal'};
  overflow: hidden; // Not working yet
  text-overflow: ellipsis; // Not working yet
  @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
    font-size: 18px;
  }
  @media print {
    font-size: 22px;
  }
`;

export default withTheme(withStyles(styles)(OfficeItem));

@media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
    margin-bottom: 8px;
  }
`;

const ButtonGroup = styled.div`
  margin-left: 0;
  height: fit-content;
`;

const StackedButton = styled.div`
  margin-left: 3px;
  width:  ${({ onlyTwoButtons }) => (onlyTwoButtons ? '50% !important' : '33% !important')};
`;

export default withStyles(styles)(ItemActionBar);

width: 150,
    height: 150,
    color: 'rgb(171, 177, 191)',
  },
  ballotButtonIconRoot: {
    marginRight: 8,
  },
  ballotButtonRoot: {
    width: 250,
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
});

export default withStyles(styles)(PageNotFound);

},
  },
  iconRoot: {
    position: 'absolute',
    left: 3,
    top: 1,
    color: theme.palette.primary.main,
    cursor: 'pointer',
    [theme.breakpoints.down('md')]: {
      fontSize: 16,
      top: 3,
    },
  },
});

export default withStyles(styles)(VoterGuideBallot);

backgroundColor: 'transparent',
    },
    color: 'rgb(6, 95, 212)',
    marginLeft: '1rem',
    outline: 'none !important',
    [theme.breakpoints.down('md')]: {
      marginLeft: '.1rem',
    },
  },
});

const OfficeNameWrapper = styled.div`
  margin-left: 30px;
`;

export default withStyles(styles)(HeaderBackToBallot);

const InputContainer = styled.div`
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: 100%;
  margin-top: ${props => (props.condensed ? '16px' : '32px')};
`;

const ErrorMessage = styled.div`
  color: red;
  margin: 12px 0;
  text-align: center;
  font-size: 14px;
`;

export default withTheme(withStyles(styles)(SettingsVerifySecretCode));

font-size: 14px;
  padding: 8px;
`;

const ScoreExplanationWrapper = styled.div`
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-top: 6px;
`;

const ScoreExplanationText = styled.div`
  margin-left: 4px;
`;

export default withTheme(withStyles(styles)(PositionItemScorePopoverTextOnly));

display: flex;
  align-items: center;
  justify-content: flex-end;
  width: fit-content;
  width: 100%;
  margin-top: 12px;
`;

const Separator = styled.div`
  width: 100%;
  height: 2px;
  background: #eee;
  margin: 16px 0;
`;

export default withStyles(styles)(SettingsAnalytics);

width: 960px;
  max-width: 90vw;
  text-align: left;
  @media (min-width: 960px) and (max-width: 991px) {
    > * {
      width: 90%;
      margin: 0 auto;
    }
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    margin: 0 auto;
  }
`;

export default withStyles(styles)(Donate);

transform: 'translate(-50%, -25%)',
  },
  dialogContent: {
    [theme.breakpoints.down('md')]: {
      padding: '0 8px 8px',
    },
  },
  closeButton: {
    position: 'absolute',
    right: `${theme.spacing(1)}px`,
    top: `${theme.spacing(1)}px`,
  },
});


export default withTheme(withStyles(styles)(SignInModal));