媒体查询在Radium中不起作用

Question

我有以下react代码，当我使用Radium to in style时，媒体查询不起作用。它只是显示一个空白页面作为输出。

import React, { Component } from 'react';
import Radium from 'Radium';



class contact extends React.Component {



  render() {

    var styles = {
  base: {
    background: 'blue',
    border: 0,
    borderRadius: 4,
    color: 'red',
    padding: '1.5em',
     '@media (max-width: 700px)': {
        background: 'yellow'
  }
},
};

    return (
<div style={styles.base}>
       <p>Hello, World!</p>
</div>

    )
  }
}

module.exports = Radium(Contact);

我需要帮助找出这里的问题所在。提前感谢！

Answer 1

您是否在使用此组件的App.js中使用了此组件？在radium中使用Mediaquery需要它。

其次，contact是小写字母，它应该是Contact，第一个字母应该是大写的全状态组件。

在chrome中，如果你安装了react插件，它会显示这个错误：

index.js:2178警告:此浏览器无法识别标记<contact>。如果要呈现React组件，则其名称以大写字母开头。

在App.js中

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

class App extends Component {

  render() {

    return (
      <StyleRoot>
      <div className="App">
       <Contact />
      </div>
      </StyleRoot>
    );
  }
}

export default Radium(App);

Answer 2

从“react”导入React，{ Component }；从“Radium”导入radium；

类联系人扩展了组件{ render() {

var styles = {
  base: {
  background: 'blue',
  border: 0,
  borderRadius: 4,
  color: 'red',
  padding: '1.5em',
 '@media (max-width: 700px)': {
    background: 'yellow'
    }
  }

}；

return (
   <div style={styles.base}>
    <p>Hello, World!</p>
   </div>

)

}}

Contact = Radium(Contact)；导出触点；