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).
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>
来源:https://stackoverflow.com/questions/38111259/how-do-you-use-withstyles-isomorphic-style-loader-when-your-classname-has-a-da