Inline pseudo classes doesn't work in React components with Radium library

Question

I've tried to use pseudo class ':hover' in inline-styles in react component using Radium library, but it didn't work.

import React from "react";
import Radium from "radium";
import './Card.css'

const Card = props => {

    const inputClasses = ['input']

    if (props.name !== '') {
        inputClasses.push('green')
    }
    else {
        inputClasses.push('red')
    }

    const style = {
        border: "solid 1px red",
        boxShadow: '0 4px 5px 0 rgba(0,0,0,.14)',
        ':hover': {
            border: '1px solid #aaa',
            boxShadow: '0 4px 5px 0 rgba(0,0,0,.25)',
            cursor: 'pointer'
        }
    }

  return (
      <div className={'card'} style={style}>
          <h1>{props.name}</h1>
          <h2>{props.year}</h2>
          <input type="text" onChange={props.onChangeName} value={props.name} className={inputClasses.join(' ')}/>
          <button onClick={props.onDelete}>Delete</button>
      </div>
  )
}

export default Radium(Card)

It applies normal inline styles as it should, as well as external stylesheet, but pseudo class doesn't work. Also tried to wrap around component in another component where I render it, but it didn't help too

  return (
                        <StyleRoot>
                            <Card
                                key={index}
                                name={card.name}
                                year={card.year}
                                onDelete = {deleteHandler}
                                onChangeName={event => onChangeName(event.target.value, index)}
                            />
                        </StyleRoot>
          )