Jak wskazać aktywny guzik w Material UI withStyles

Popełniłam taki kod (jeżeli to raczej do sekcji web mastering to proszę o przeniesienie):

const MyPagination = withStyles({
  root: {
    
    '& button':{background: 'rgba(122, 194, 33, 0.8)', color:'white',border:'1px solid #298B01',
    boxShadow: 'inset 0 0 5px #298B01', },
    '& button:active':{background: 'red', color:'white',border:'1px solid #298B01',
    boxShadow: 'inset 0 0 5px #298B01', },
  },
})(Pagination);

aby zredefiniować domyślny wygląd komponentu Pagination. O ile pierwsza instrukcja robi, co trzeba, to druga nie 'chwyta' aktywnego guzika. Wypróbowałam kilka podobnych wersji, ale żadna nie styka. Ktoś może coś takiego pisał?