import Radium, { StyleRoot } from 'radium';
import breakpoints from '../../../styles/breakpoints';
const styles = {
header: {
fontSize: '1.5em',
display: 'inline',
[`@media screen and (min-width: ${breakpoints.screenMedium})`]: {
paddingTop: '2%';
},
},
content1: {
textAlign: 'center',
color: 'palevioletred'
},
content2: {
textAlign: 'right',
color: 'red'
}
};
const Header = () => <StyleRoot>
<div style={[styles.header, this.state.flag ? styles.content1 : styles.content2]} className="sg-Header">Hello World!</div>
</StyleRoot>
export default Radium(Header)