moroshko/react-autosuggest

Issue with pseudo classes when theme styling using Radium

Open

#178 创建于 2016年5月31日

在 GitHub 查看
 (3 评论) (0 反应) (0 负责人)JavaScript (5,936 star) (637 fork)batch import
help wanted

描述

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.

贡献者指南