라듐 - 오류 : StyleRoot 구성 요소에서 응용 프로그램을 포장하십시오

Question

나는 미디어 쿼리를 추가 할 간단한 반작용 구성 요소가 있습니다 그러나

import React, {Component} from 'react'; 
import Radium, {StyleRoot} from 'radium'; 

import styles from '../../core/styles/base.css'; 
import sliderstyles from './Slider.styles.css'; 

class Slider extends Component { 
    constructor(props) { 
     super(props); 

    } 

    render() { 

     let styles = { 
      slider: { 
       '@media (max-width: 1024px)': { 
        display: 'none' 
       } 
      } 
     } 

     return(
      <StyleRoot> 
       <form ref="form" className={sliderstyles.ttSlider} style={styles.slider}> 
        <input max="480" min="30" name="slider" onChange={this.handleSlider} ref="seconds" type="range" value={this.props.totalSeconds}/> 
       </form> 
      </StyleRoot> 
     ) 
    } 
} 

export default Radium(Slider); 

을,이 컴파일 할 때 나는 다음과 같은 오류가 발생합니다 :

Uncaught Error: To use plugins requiring addCSS (e.g. keyframes, media queries), please wrap your application in the StyleRoot component. Component name: Slider .

나는 내가 뭘 잘못 15.0.0 및 라듐 0.18.1

반응 사용하고 있습니다?

Answer 1

<StyleRoot>에서 직접 미디어 쿼리를 사용할 수 없으므로 <StyleRoot>의 내용을 별도의 구성 요소에 넣어야합니다.

// COUNTEREXAMPLE, DOES NOT WORK 
<StyleRoot> 
    <div style={{'@media print': {color: 'black'}}} /> 
</StyleRoot> 

이 작동합니다 :

class BodyText extends React.Component { 
    render() { 
    return <div style={{'@media print': {color: 'black'}}} />; 
    } 
} 

class App extends React.Component { 
    render() { 
    return (
     <StyleRoot> 
     <BodyText>...</BodyText> 
     </StyleRoot> 
    ); 
    } 
} 

Answer 2

을 당신은 "StyleRoot"로 전체 응용 프로그램을 포장해야하지 구성 요소 "슬라이더"

import React, { Component } from 'react'; 
import Radium, { StyleRoot } from 'radium'; 
import Slider from './Slider/Slider'; 

class App extends Component { 
    // ... 
    render() { 
    // ... 
    return (
     <StyleRoot> 
     ... 
     <Slider ... /> 
     ... 
     </StyleRoot> 
    ); 
    } 
} 

export default Radium(App); 

이 방법은 작동합니다 .