:hover and :focus just don't work on my end

[Tony-Ndichu]

Here is my code

import Radium from 'radium';
import TextareaAutosize from 'react-textarea-autosize';

let style = {
    minHeight: 50,
    borderStyle: 'solid',
    width: '99%',
    resize: 'none',
    ':hover': {
      boxShadow: '0 0 8px 0 rgba(110, 100, 200, 0.6)',
      border: 'red !important',
      backgroundColor: 'yellow !important',
    },
    ':focus': {
      outline: 'none',
    }
};

class TextArea extends React.Component<iProps>{
  
...
        return (
          <InputWrapper>
            {label && <Label htmlFor={name}>{label}</Label>}
            <TextareaAutosize
              key={1}
              style={style}
              minRows={1}
              maxRows={6}
              {...input} 
              id={name} 
              name={name} 
              meta={meta}/>
              {meta.error && <span>{sentenceCase(meta.error)}</span>}
          </InputWrapper>
...
    );
  }
}

export default Radium( TextArea );

But whatever variations of wrapping the app using Radium that I try or anything else at all, focus and hover JUST DONT WORK. I was so grateful to find this package only to find that it doesn't do what it says it does. Am following the documentation directly

[Jobeso]

I also had issues with that and ended up using the friendly-pseudos plugin. With that it's working fine. Hope that helps you, too.