Question

我正在学习React JS。在学习的过程中我遇到了这个问题。我不知道为什么即使我已经通过命令npm install --save radium安装了镭，它也会给出此错误请在下面找到我的代码-

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

class App extends Component {
  render() {
    const style = {
        backgroundColor: '#ccc',
        color: '#111',

        '@media (min-width: 500px)': {
          backgroundColor: 'yellow',
          color: 'red'
        }
    };

    return (
      <StyleRoot>
      <div className="App" style={style}>
        dsdsdsds
      </div>
      </StyleRoot>
    )
  }
}

export default Radium(App);

Answer 1

在Radium中，您不能直接在<StyleRoot>下使用媒体查询，关键帧等。您必须再添加一个组件，该组件将被包装在<StyleRoot>中：

class StyledDiv extends Component {
  render() {
    const style = {
      backgroundColor: "#ccc",
      color: "#111",

      "@media (min-width: 500px)": {
        backgroundColor: "yellow",
        color: "red"
      }
    };
    return <div style={style}>dsdsdsds</div>;
  }
}

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

export default Radium(App);

错误：要使用需要添加CSS的插件（例如关键帧，媒体查询），请将您的应用程序包装在StyleRoot组件中

1 个答案: