为什么媒体查询不能与Radium包一起使用？

问题描述

我正在使用React和Radium进行内联样式设计。我想在上使用媒体查询。 但是当我保存它时会抛出此错误=>

var sql = require("mssql");

var dbConfig = {
    server: "server_name",database: "database_name",port: 1433,driver: "mssql",options: {
        trustedConnection: true
    }
}

但是我已经在那儿用过了，那为什么会抛出错误呢？我尝试了一下，但找不到原因。 这是我下面的App.js代码：

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

};

```import React,{ Component } from "react";
   import "./App.css";
   import Person from "./Person/Person";

   import Radium,{ StyleRoot } from "radium";

   class App extends Component {
    state = {
      persons: [
     { id: "asfa1",name: "Max",age: 28 },{ id: "vasdf1",name: "Manu",age: 29 },{ id: "asdf11",name: "Stephanie",age: 26 },],otherState: "some other value",showPersons: false,};

  nameChangedHandler = (event,id) => {
const personIndex = this.state.persons.findindex((p) => {
  return p.id === id;
});

const person = {
  ...this.state.persons[personIndex],};

// const person = Object.assign({},this.state.persons[personIndex]);

person.name = event.target.value;

const persons = [...this.state.persons];
persons[personIndex] = person;

this.setState({ persons: persons });

};

   deletePersonHandler = (personIndex) => {
// const persons = this.state.persons.slice();
const persons = [...this.state.persons];
persons.splice(personIndex,1);
this.setState({ persons: persons });

};

  togglePersonsHandler = () => {
 const doesShow = this.state.showPersons;
this.setState({ showPersons: !doesShow });

}

   render() {
      const style = {
           backgroundColor: "green",color: "white",font: "inherit",border: "1px solid blue",padding: "8px",cursor: "pointer",":hover": {
              backgroundColor: "lightgreen",},"@media (min-width: 500px)": {
               backgroundColor: "blue",}
        };

     let persons = null;

        if (this.state.showPersons) {
            persons = (
              <div>
            {this.state.persons.map((person,index) => {
              return (
              <Person
                click={() => this.deletePersonHandler(index)}
                name={person.name}
                age={person.age}
                key={person.id}
                changed={(event) => this.nameChangedHandler(event,person.id)}
          />
        );
      })}
    </div>
  );
  // DYNANICALLY ADDING INLINE STYLES
  style.backgroundColor = "red";

  style[":hover"] = {
    backgroundColor: "salmon",};
}

// DYNANICALLY ADDING CLASSES
const classes = [];

if (this.state.persons.length <= 2) {
  classes.push("red");
}
if (this.state.persons.length <= 1) {
  classes.push("bold");
}
return (
    <StyleRoot>
      <div className="App">
        <h1>Hi,I'm a React App</h1>
        <p className={classes.join(" ")}>This is really working!</p>
        <button style={style} onClick={this.togglePersonsHandler}>
          Toggle Persons
        </button>
      {persons}
    </div>
  </StyleRoot>
);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）