radium-inline-styling.jsx

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)

styled-components-inline-styling.jsx

import styled from 'styled-components';
import breakpoints from '../../../styles/breakpoints';

const Header = styled.div`
  font-size: 1.5em;
  text-align: ${props => props.content ? 'center' : 'right'};
  color: ${props => props.content ? 'palevioletred' : 'red'};
  @media all and (max-width: ${breakpoints.screenMedium}) {
    padding-top: 2%;
  }
`;

export default () => <Header content={this.state.flag} className="sg-Header">Hello World!</Header>

坑：

http://martinbrochhaus.com/react-styles-issue.html