Question: Class name with dash

[pardahlman]

Hello - excellent framework! 👍

I tend to use dashes (-) in my class names, like product-image. Can I still do so when using styleable? My naive approach was to do what I've been doing with the className attribute, that is passing in productImage, but it didn't work for me.

Thanks!

[jaketrent]

Hey @pardahlman. Thank you! I'm glad you're liking the library. Yes, I believe you can use dashified class names. Rather, I can't think of why not. The difference would be in the usage of the output. You'll have to use square brackets, like:

import React from 'react'
import styleable from 'react-styleable'

import css from './index.css'

class MyComponent extends React.Component {
  render() { return (
    <div className={this.props.css['product-image']}></div>
  ) }
}

export styleable(css)(MyComponent)

I use camelCase just because the usage is easier (just use the dot operator). And it's kind of nice to consolidate the casing standards in my code. Good luck!