Issue with pseudo classes when theme styling using Radium
#178 opened on May 31, 2016
Description
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.