Add themeing support

[GianBe]

Looking at other components (discarding all the components that don't do anything to facilitate the styling of the component) it seems like there are 2 preferred method to add themeability:

• External css files or styles tags and just add custom class names to the component (seems like the more used method)
• Inline css used with props or external packages, this will add class names as well

I did look at a few packages that can be interesting to use for themeing the components...

Themeing packages in npm

• Rethemeable
• react-theme
• Radium
• jsxstyle
• React JSS
• react-in-style
• smart-css

Rethemeable

• npm
• github

+ Should be relatively simple to implement in this component

+ Can add css classes and/or inline css styles

+ No pre-defined limits by the package author

- Seems like nobody did implement this in their finished component, but there is a work in progress that uses it here

react-theme

• npm
• github

+ Same functionality of Rethemeable

+ More documentation

+ Seems like a solid project

- Used only in conjunction with Radium here

Radium

• npm
• github

+ Feels like a mantained and complete project

+ Managed :hover and other events

+ Was the inspiration for the other packages

+ A lot of projects depend on it

+ Flexible

+ Used in a lot of interesting components

jsxstyle

• npm
• github

+ JSX props

- Convert the styles to css (in this component inline styles should be better)

React JSS

• npm
• github

+ Can be setted up as a props

- Convert to css - In the interesting components where it's implemented is used in a minor way

react-in-style

• npm
• github

+ uses plain css so can manage every event heandler in a simple way

- From the npm page: This is in beta, and has not yet reached a stable realease

smart-css

• npm
• github

+ inline css styles

+ prevent confilcts with other styles

+ well documented

- seems like a work in progress

I think that Radium is the best way to manage the theme of the component, but react-theme and Rethemeable seems like valid alternatives.

[yuchi]

Great overview, and I’m with you in thinking that Radium would be a good choice, if this was to be used as in a standalone React app.

Given that we’re gonna style it through Liferay themes, how would this fact change your opinion?

[GianBe]

It really depends, one solution is to add classnames to the props:

+ It's easy to understand

+ fast to implement for the user

+ this method is used in other react components

- not that flexible.

Another solution is to let the user decide the structure of the components, but I think this is not the best way to solve the problem.

While this solution is the more flexible, I think that is not that easy to understand and is slow for the end user to implement. The question that comes to mind is: How many tries does a user attempt before giving up on using the component?

To end my thought I think that the most important point is that a component should be easy to implement and understand.