I'm using Material UI v4, For styling I'm using makeStyles. I'm not able to find out how to target same CSS with different class name

Question

I'm using Media query where i want hide some block by css like below

@media only screen and (min-width: 768px) and (max-device-width: 1024px) {
  .arrowDown2,
  .userName,
  .userBtn,
  .verticalLine {
    display: none !important;
    visibility: hidden !important;
  }
}

but in Material ui makeStyles

  "@media only screen and (min-width: 768px) and (max-device-width: 1024px)": {
arrowDown2: {
  display: "none !important",
  visibility: "hidden !important"
},
userName: {
  display: "none !important",
  visibility: "hidden !important"
},
userBtn: {
  display: "none !important",
  visibility: "hidden !important"
},
verticalLine: {
  display: "none !important",
  visibility: "hidden !important"
},

I'm repeating code like this, is there is any better way to target multiple classes like css in Material makeStyle?