className에 대시가있을 때 어떻게 withStyles (동형 스타일 로더)를 사용합니까?

이의 말을하자이 당신의 SCSS입니다 :className에 대시가있을 때 어떻게 withStyles (동형 스타일 로더)를 사용합니까?

.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} (아무 일도 일어나지 않습니다).

출처

2016-06-29 tacos_tacos_tacos

을 나는 그것이 객체의 상상, 그래서's의 [ '일부 클래스'] '작동합니다. 나는 css와 같은 것이 아니라는 것을 안다. 그러나 낙타의 경우는 보통 이런 스타일을 사용할 때 선호된다. –

'className = {s [ 'some-class']}'가 작동하지 않는 이유는 무엇입니까? – mpen

@ 제안을 시도하십시오 –

JSX의 중괄호 사이의 코드는 단지 JavaScript이며 s은 단지 하나의 개체입니다. 즉 대시, 공백 또는 다른 재미있는 문자가 포함되어 있어도 JS에서 평소와 같이 s의 속성에 액세스 할 수 있습니다.

특히, 당신은 쓸 수 있습니다 :

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

출처

2016-06-30 02:46:01 mpen

className에 대시가있을 때 어떻게 withStyles (동형 스타일 로더)를 사용합니까?

답변

관련 문제