2

我有以下反应代码，当我使用 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);

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

4

2 回答 2

2

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

其次，contact是小写字母，应该是Contact，state-full 组件的第一个字母应该是大写。

在 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);
于 2018-04-02T17:16:03.440 回答
-1

从'react'导入反应，{组件}；从“镭”导入镭；

类接触扩展组件{渲染（）{

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>

)

} }

接触=镭（接触）；出口联系人；

于 2017-05-30T06:44:23.660 回答