2

I have the following react code and when I use Radium to in-line style, the media query doesn't work. It simply shows a blank page as output. 

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);

I need help finding what is the problem here. Thanks in advance!

mukhilsaravanan
  • 115
  • 1
  • 1
  • 9

2 Answers2

2

Did you use <StyleRoot> in App.js where you are using this component? Use of Mediaquery in radium requires it.

Secondly,contact is in small letters,it should be Contact ,first letter should be capital for state-full components.

In chrome,if you have react plugin installed,it will show this error:

index.js:2178 Warning: The tag <contact> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

In 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);
Abhishek Mondal
  • 21
  • 6
-1

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

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>

)

} }

Contact = Radium(Contact); export Contact;

Adeel Abbas
  • 1