Strange styling in electron

[radhewro]

Hi,

something looks strange after using react-toolbox-themr in electron. This should be a Button, an Input and a Navigation panel:

App.js code:

import theme from './assets/react-toolbox/theme'
import ThemeProvider from 'react-toolbox/lib/ThemeProvider'
import ReactDOM from 'react-dom'
import React from 'react'

import Button from 'react-toolbox/lib/button/Button'
import Navigation from 'react-toolbox/lib/navigation/Navigation';
import Link from 'react-toolbox/lib/link/Link';
import Input from 'react-toolbox/lib/input/Input';

// Render shell
ReactDOM.render(
  <ThemeProvider theme={theme}>
    <div>
      <Button label="Hello world!" raised primary />
      <Input type='email' label='Email address' icon='email' />
      <Navigation type='vertical'>
        <Link href='http://' label='Inbox' icon='inbox' />
        <Link href='http://' active label='Profile' icon='person' />
      </Navigation>
    </div>
  </ThemeProvider>,
  document.getElementById('container')
);

Compiled with babel (presets: es2015, react).

I've tested test-toolbox.tar.gz in browser too (modified to get a Button and an input field) and the problem still exists:

Web.app.js code:

import React, { Component } from 'react';
import './App.css';

import Input from 'react-toolbox/lib/input';
import Slider from 'react-toolbox/lib/slider';
import Button from 'react-toolbox/lib/button/Button';
import Snackbar from 'react-toolbox/lib/snackbar/Snackbar';

class SnackbarTest extends React.Component {
  handleClick = () => {
    this.refs.snackbar.show();
  };

  handleSnackbarClick = () => {
    this.refs.snackbar.hide();
  };

  render () {
    return (
      <section>
        <Button label='Show Snackbar' primary raised onClick={this.handleClick} />
        <Input label='Hello' />
        <Input type='email' label='Email address' icon='email' />
      </section>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <section>
        	<SnackbarTest />
        </section>
      </div>
    );
  }
}

What I'm doing wrong?

[anri-asaturov]

I had the same in my electron project, i found that the reason is this style i have:

* {
  font-family: "Open Sans", sans-serif;
}

It overrides material-icons font

[FDiskas]

Got same problem but its still posible to fix that react-toolbox/react-toolbox#1321