Как я могу использовать псевдо и медиа запрос в одном элементе

Question

изменение цвета при наведении зависит от медиа-запросов, использующих Radium?

Мне нужно, чтобы каждый медиазапрос при наведении указывал на специальный цвет При наведении курсора на divEle и мультимедиа размером более 500 пикселей цвет текста зеленый, При наведении курсора на divEle и на носителе размером менее 500 пикселей цвет текста серый,

const Style ={
        divEle : {
            '@media (min-width:500px)':{
                color: 'red',
                ":hover":{
                    color:'green'
                }
            },
            color: 'red'
            ,':hover': {
                 color:'gray'
            },
        }
     }