react-toolbox 2 not working with create-react-app 1.0.3 (react-scripts 0.9.0)

[pakmans]

The button shows, but with no styling at all. When I click, an animation does occur (at a different position than the button).

I'm new to React + node so there is not much input I can give other than my files. I followed both the readme and animated gif, making adjustments here and there because of differences in path names and locations (probably due to differences in create-react-app version?)

File structure (omitting node_modules):

.
├── assets
│   └── react-toolbox
│       ├── theme.css
│       └── theme.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── toolbox
        ├── theme.css
        └── theme.js

I don't know how I ended with assets/react-toolbox/ and src/toolbox/. I have tried both without success.

package.json

{
  "name": "hello",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0",
    "react-toolbox-themr": "^1.0.2"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-toolbox": "^2.0.0-beta.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "toolbox": "react-toolbox-themr"
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';
import theme from './toolbox/theme.js'
import App from './App';
import './toolbox/theme.css';
import './index.css';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

App.js

import React, { Component } from 'react';
import { Button } from 'react-toolbox/lib/button/Button';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button raised>Hello World!</Button>
      </div>
      );
  }
}

export default App;

[supirman]

Do you get error like this:

Error in ./~/react-toolbox/lib/button/theme.css
Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is we
ird
    at Array.map (native)
 @ ./~/react-toolbox/lib/button/theme.css

Try to change import { Button } from 'react-toolbox/lib/button/Button' with import Button from 'react-toolbox/lib/button/Button'

[rodcorsi]

The same here, but this solution don't work for Table:

Try to change import { Button } from 'react-toolbox/lib/button/Button' with import Button from 'react-toolbox/lib/button/Button'

import React, { Component } from 'react';
import Table from 'react-toolbox/lib/table/Table';
import './App.css';

const UserModel = {
  name: {type: String},
  twitter: {type: String},
  birthdate: {type: Date,
    title: 'Date of Birth'},
  cats: {type: Number},
  dogs: {type: Number},
  active: {type: Boolean}
};

const users = [
  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
  {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
];

class App extends Component {
  render() {
    return (
      <div className="App">
        <Table
          model={UserModel}
          source={this.state.source}
        />
      </div>
    );
  }
}
export default App;

Failed to compile.

Error in ./~/react-toolbox/lib/checkbox/Checkbox.js
Module not found: 'react-style-proptype' in /home/rodrigo/myapp/node_modules/react-toolbox/lib/checkbox

 @ ./~/react-toolbox/lib/checkbox/Checkbox.js 20:26-57

[pakmans]

There was no error in the terminal nor in the web console. Changing the import from { Button } to Button worked. Thank you very much, damn default imports! I need to understand more how imports work. Sorry for posting here, I should have posted elsewhere (stackoverflow perhaps).

[supirman]

I am newbie, too. I don't really understand what happen there. I think it is because most of the example still written in 1.x.x version. The 2.0.0-beta.x have different method in importing.

[javivelasco]

If you want to import with css use index files otherwise you have to import the component file. These two way exist because we need to allow people to import a component raw but also it's convenient to import with styles. It's going to change soon because it's a bit messy anyway!