Hacker News new | past | comments | ask | show | jobs | submit login

Theming is a difficult problem. Each component has a couple of visual properties which may depend on the state (hover, focus, error, internal variable). Having a separate variable for each visual property would be a nightmare.

I'm currently working on themes for a similar framework. It's still in early stage but you can see it here: http://cx.codaxy.com/v/master/themes/




Today, I was thinking about this problem.

You can separate component Style into - BASE + States classes.

classnames[0] can used to use multiple classes, the classes can be activated using component state. This provides a viable solution for Structure & Style.

[0] https://github.com/JedWatson/classnames


This is useful for structuring components internally, but sadly doesn't help solve the theming issue at all :-(

What you want from theming is a global skin. You want users of your component library to be able to say "I want all of my buttons to be red" without having to wrap the component or pass a prop to every component. (simplified example)

Doing so just with class names is very very hard. It's what we've done for ElementalUI (together with Less), but it just doesn't work – it's a pita for users!


This exact approach is used for Cx components.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: