Как вы используете withStyles (загрузчик изоморфного стиля), когда в вашем className есть тире?

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>