Radium - 错误：请将您的应用程序包装在 StyleRoot 组件中答案

【问题标题】：Radium - Error: please wrap your application in the StyleRoot componentRadium - 错误：请将您的应用程序包装在 StyleRoot 组件中
【发布时间】：2017-01-03 15:27:13
【问题描述】：

我有一个简单的 React 组件，我想将媒体查询添加到：

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);

但是，在编译时出现以下错误：

未捕获的错误：使用需要 addCSS 的插件（例如关键帧、媒体查询），请将您的应用程序包装在 StyleRoot 中零件。组件名称：Slider。

我正在使用 react 15.0.0 和镭 0.18.1

我做错了什么？

【问题讨论】：

尝试将您的样式移动到 css 文件中

标签： javascript ecmascript-6 media-queries radium

【解决方案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>
    );
  }
}

【讨论】：

感激不尽。这解决了我的问题！过去 2 天我的头一直撞在桌子上！

【解决方案2】：

你必须用“StyleRoot”来包装你的整个应用程序，而不是你的组件“Slider”：

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);

这样，它应该可以工作。

【讨论】：