Exploring how we can integrate LESS directly into React.js components

Navbar.js

var Navbar = React.createClass({
 
    getInitialState() {
        return {
            view: 'fullscreen',
            top: 100,
            left: 0
        };
    }
 
    render() {
        var styles = (
            <style>
                Navbar {
                    translate3d({{left}}px, {{top}}px, 0);
                 
                    background: #000;
                    color: #fff;
                 
                    width: 75%;
                 
                    &[view=fullscreen] {
                        width: 100%;
                    }
                 
                    &[view=minimal] {
                        width: 50%;
                    }
                 
                    // Alternatively
                    width: {{this.state.view == 'fullscreen' ? '100%' : '50%'}};
                 
                    container {
                        border: 1px solid yellow;
                    }
                }
            </style>
        ); 

        styles = parseStyle(styles, this); // Parse the React Stylesheet
        
        return (
            <div role="navigation" style={{styles.Navbar}}>
                <div style={{styles.Navbar.container}}>
                    <Link to="/" style={{styles.Navbar.brand}}>
                        <img src="/images/logo-small.png" width="38" height="38" alt="React" />
                        <span>{{this.state.view == 'fullscreen' ? 'Fullscreen view' : 'Custom view'}}</span>
                    </Link>
                </div>
            </div>
        );
    }
 
    changeView(type) {
        this.setState({view: type}); // minimal, fullscreen, etc.
    }
 
});

var Navbar = React.createClass({

  getInitialState() {
    return {
      view: 'fullscreen',
      top: 100,
      left: 0
    };
  }

  render() {
    var navStyle = [
      styles.navBar,
      {translate3d: `(${this.state.left}px, ${this.state.top}px, 0)`},
      this.state.view === 'fullscreen' && styles.fullscreen,
      this.state.view === 'minimal' && styles.minimal,
    ];

    return (
      <div role="navigation" style={navStyle}>
        <div style={styles.container}>
          <Link to="/" style={styles.brand}}>
            <img src="/images/logo-small.png" width="38" height="38" alt="React" />
            <span>{{this.state.view == 'fullscreen' ? 'Fullscreen view' : 'Custom view'}}</span>
          </Link>
        </div>
      </div>
    );
  }

  changeView(type) {
    this.setState({view: type}); // minimal, fullscreen, etc.
  }

});

var styles = {
  navBar: {
    background: '#000',
    color: '#fff',
    width: '75%',
  },
  fullScreen: {
    width: '100%',
  },
  minimal: {
    width: '50%',
  },
  container: {
    border: '1px solid yellow',
  },
  brand: {
    // ...
  },
}