Issue with pseudo classes when theme styling using Radium

[countravioli]

So I've dug into your other component (react-autowhatever) and react-themable a bit. I'm using Radium internally on my application and defining my autosuggest theme using inline styles was fine. The problem comes when we get into psuedo classes. Radium implements them by defining keys on your style object that look like:

const inputStyle = {
  height: 50,
  borderColor: 'red',
  ':hover': {
    borderColor: 'blue'
  }
}

Radium implements these by using a high order component wrapping your component that the element in question belongs to. In the react-autosuggest paradigm this is the react-autowhatever component. However, because that is an internal piece of the autosuggest, there is no way to add a Radium decorator to the autowhatever.

I think this component abstraction is the only issue I see with usage of react-themable.

I can't think of a good paradigm to implement this, other than allowing the autosuggest to take a prop that allows you to pass a HOC wrapper for the autowhatever. The ideal way to work with Autosuggest + Radium would be like this:

import Autosuggest from 'react-autosuggest';

const Radium = require('Radium');
const WrappedAutoSuggest = Radium(Autosuggest);

class MyComponent extends React.Component { 
  render() {
    return (
      <WrappedAutosuggest {...props} />
    );
  }
}

Just wanted to add this information to the project, I really like the component. I think I'm just going to use CSS on input part of the theme as work around for now. Cheers.

[jpeyper]

Just wanted to say that I'm also using radium and having been able to get the psuedo classes to work.

As this issue is a month an a half old, has there been workarounds or fixes for this?

[countravioli]

@jpeyper I worked around by using an actual css class in my theme definition.

...
containerOpen : {
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
    },
    input : 'react-autosuggest__input', //XXX INPUT IS SPECIAL, autosuggest + Radium + pseudo classes don't work 
    suggestionsContainer : {
        position: 'absolute',
...

Our project already had a scss webpack loader and extraction for a couple dependencies so I used the scss webpack loader and it is extracted to the same css file that is output.

require('!!style!css!sass!../scss/autoSuggest.scss');

//autoSuggest.scss
.react-autosuggest__input {
  width : 100%;
  height: 40px;
  padding: 10px 10px 10px 25px;
  fontSize: 16px;
  border: 1px solid #DDD;
  borderRadius: 4px;
  &:focus {
    outline: none;
    border : 1px solid #CCC;
  }
}

[angelanicholas]

@countravioli @jpeyper There are some known Radium bugs around hovering over elements that have toggled visibility - https://github.com/FormidableLabs/radium/issues/527, https://github.com/FormidableLabs/radium/issues/524, https://github.com/FormidableLabs/radium/issues/510. I ran into this and asked about it a few months ago and they said they've talked about handling hover/focus/active with CSS (the same as they do for media queries) as a workaround, but that no one was actively working on the issue. Wrapping Autosuggest with Radium should work for focus/active but you'll probably still need CSS for hover.