当你的类名中有破折号时，你如何使用 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)

所以这很有效。

现在，如果您需要为 class some-class 命名，会发生什么情况？显然 className={s.some-class} 不起作用，className={s.someClass} 也不起作用（没有任何反应）。

Answer 1

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

具体可以这样写：

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

当你的类名中有破折号时，你如何使用 withStyles（同构样式加载器）？

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

reactjs

webpack-style-loader

isomorphic-style-loader