Question

我有以下反应代码，当我使用Radium进行内联样式时，媒体查询不起作用。它只是显示一个空白页面作为输出。

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

你使用过＆lt; StyleRoot＆gt;在App.js中您使用此组件？在镭中使用Mediaquery需要它。

其次，联系是小写字母，应该是联系，首字母应该是状态完整组件的大写字母。

在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}; 从'镭'进口镭;

class Contact extends 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>

)

} }

接触=镭（联系）; 出口联系;

Media Query无法在Radium中运行

2 个答案: