If you need to darken or brighten the color of an element by css (e.g. for a hover effect) you can adjust it´s color dynamically with this:
filter: brightness($percentage)
.
With makeStyles:
filter: "brightness($percentage)"
100% is the base, you can set less (e.g. 97.5%) or more (e.g. 125%).
Thanks to imjared on this answer on stack overflow: https://stackoverflow.com/a/25942447
Let me know if it helped you.
Best,
Frank