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

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>