tacos_tacos_tacos tacos_tacos_tacos - 2 months ago 23
React JSX Question

How do you use withStyles (isomorphic style loader) when your className has a dash in it?

Let's say this is your SCSS:

.someclass {
background: red;
height: 1500px;
width: 10000px;
}


And this is how you use it:

import React, { Component, PropTypes } from 'react'
import ReactDropZone from 'react-dropzone'
import ReactDOM from 'react-dom'
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import s from './ImageTool.scss'

class ImageTool extends Component {

render() {

return (

<div className={s.someclass}></div>

)

}

}

export default withStyles(ImageTool, s)


So this works well.

Now what happens if you need to name your class
some-class
? Clearly
className={s.some-class}
doesn't work, and neither does
className={s.someClass}
(nothing happens).

Answer

The code between the curly braces in JSX is just JavaScript and s is just an object. i.e., you can access properties of s just like you normally would in JS, even if they contain dashes, spaces or other funny characters.

Specifically, you can write:

<div className={s['some-class']}></div>