Javascript 使用道具或css变量更改组件的样式？

下面是我放在单独组件中的块：

在某些断点，我需要更改它的样式。 我看到了两种可能的正常选择，但我不知道哪一种更方便

通过道具：

---

我使用Material UI中的

makeStyles

来实现同样的效果

const useStyles = makeStyles({

 anyClassName:{
  
  backgroundColor: 'red', // You can't type background-color as '-' are not accepted as variable names
  fontSize: '1Rem';
  // After doing the styling
},

AnotherClassName: {
 
 backgroundColor: 'green';
 fontSize: '0.8rem';
 
}


})

// Now we have to assign it like this

const classes = useStyles();

一旦我们这样做了，我们就可以像这样将类分配给我们想要的任何组件

<td className={classes.anyClassName}>I'm the red boi</td>

<h3 className={classes.AnotherClassName}>I'm the Green Guy</h3>

我是红包
我是那个绿色的家伙