当你的className中包含破折号时,你如何使用withStyles(同构样式加载器)？

Question

让我们说这是你的SCSS:

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

这就是你如何使用它:

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)

所以这很好用.

现在,如果你需要为你的课程命名,会发生什么some-class？显然className={s.some-class}不起作用,也没有className={s.someClass}(没有任何反应).

Answer 1

JSX中大括号之间的代码只是JavaScript而且s只是一个对象.即,您可以s像在JS中一样访问属性,即使它们包含破折号,空格或其他有趣的字符.

具体来说,你可以写:

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