2

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

我究竟做错了什么？

4

2 回答 2

3

您不能直接在 下使用媒体查询<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>
    );
  }
}
于 2017-07-20T00:45:34.790 回答
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);

这样，它应该可以工作。

于 2017-11-12T16:20:56.053 回答