2016-12-16 7 views
2

html이 모든 인라인 스타일에서 못 생기지 않도록 모든 인라인 라디안 스타일을 클래스에 추출 할 수 있습니까?라듐 인라인 CSS - 빌드 내보내기 클래스에?

나는이 있습니다

@Radium 
class ExtendedComponent extends Component { 
    render() { 
    return (
     <div style={[styles.color, styles.box]}</div> 
    ); 
    } 
} 

const styles = { 
    color: { 
    color: green 
    }, 

    box: { 
    borderColor: red, 
    height: '20px', 
    width: '20px' 
    } 
}; 

는 현재 출력 HTML은 다음과 같이 보입니다 :

<div style="color: green; border-color: red; height: 20px; width: 20px;"></div> 

을 나는 그것을 할 수 것입니다 위해 뭔가 같은 :

<div class="c1"></div> 

어디 CSS 규칙에는 다음이 포함됩니다.

.c1 { 
    color: green; 
    border-color: red; 
    height: 20px; 
    width: 20px; 
} 

답변

0

잘 모르겠습니다. Radium은 본질적으로 '인라인'스타일을 동적으로 계산하고 적용하는 데 사용되며 JS 내에서 스타일을 묶어서 'React Component'모듈을 활용합니다.

반응 스타일 아래 링크의 목록에서 이것은 필요한 것으로 보입니다. '빌드시에 CSS로 스타일을 추출'절을 참조하십시오 - https://github.com/js-next/react-style#extracting-styles-into-css-at-build-time

대체 라이브러리 여기에 당신이 원하는 것을 할 몇 가지 대안에 대한 링크는 다음과 같습니다 https://github.com/FormidableLabs/radium/tree/master/docs/comparison가.