Why use className as interface

[natew]

This seems like the strictly the wrong way to inject styles.

1. Now to apply styles you must set a class attribute
2. Your class attributes must not consider they don't conflict with your "style class" attributes

I'd prefer the react-style method, where they shim in a new property (styles) and you pass them in. Or alternatively, why not just have an interface where I can pass them directly into style={}? Or is that already possible?

[chriskjaer]

Using inline styles is fine, and you are free to do that. But in my opinion, that should be left for dynamic values.

But remember, if you go with the inline style approach, you have to find a way to do pseudo selectors, media queries + all the other 'simple' things that you normally take for granted in CSS. Sure, it's possible to do all those in javascript, but it leads to unnecessary bloated code. (...Just try and make a simple selector widget with an icon before the text, with a hover + active state that should look slightly different on mobile and tablet devices. It's certainly possible in js, but not in a clean way.)

Stilr takes a different approach. We embrace css but gives you javascript to manipulate it. But you wont have trouble with the classic css namespace collisions, because all class names are based on a content hashes. In fact, don't mind the class name property. It's just an implementation detail to bypass having to reinvent simple css stuff.

[natew]

So is there a way for me to pass in class names directly to tags? And does stilr just return a string that's a class I can use?

[chriskjaer]

Yes, the create method returns a string that you can use as a class name.

E.g.

const styles = StyleSheet.create({
  container: {
    color: 'blue'
  }
});

// styles.container is now a string, containing: `_1UXA3k`
// Use this as your class name on tags/components

<AppComponent className={ styles.container } />

Stilr takes the content of the container object and converts it to a content hash. That content hash is your class name.

You are free to add additional classes to your component besides the Stilr generated class. Since styles.container is just a string now, you can use something like classnames to handle the concatenation or just plain old vanilla javascript like:

const classes = [
  styles.container,
  'your-class-name'
].join(' ');

<AppComponent className={ classes } />