Question

我有一个简单的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。

我使用的是反应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”包装你的整个应用程序，而不是你的组件“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);

这样，它应该可以工作。

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

2 个答案: