react-toolbox: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird

Considering that theres some many people still having issues with this, maybe it would make sense to reopen it? 😃

I know this is an old issue, but I though I’d post my solution here as well.

Using the latest create-react-app and ejecting the app, I had to change my config that loads the css to include the modules: true option.

{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
+       modules: true,
      },
    },
  ],
},

Ok I got this to work. All that was necessary was to change my import to be:

import Button from 'react-toolbox/lib/button/Button';

The initial error as reported by @mulyoved was caused by importing per the docs:

import { AppBar } from 'react-toolbox/lib/app_bar';

This imports a bundled module and includes CSS modules that don’t play nice w/ create-react-app. Importing the default export directly from the module file includes the theme but not the CSS modules.

My issue was caused by following the Raw Component import instructions in the README:

https://github.com/react-toolbox/react-toolbox#raw-component

This imports the component minus any theme functionality. I think the docs could be clearer on this so I’ll create another issue.

I’m still having an issue here. With import { Button } from 'react-toolbox/lib/button'; I just see the ripple affect only on the button.

Using import Button from 'react-toolbox/lib/button/Button'; I see no affect/theme on the button at all.

I followed the instructions on setting up postcss/webpack. Any ideas?

Finally I found solution.

In my case webpack was configured to use css-modules only for src folder of my app. Since React Toolbox located inside node_modules directory, post-css loader was applied to source that doesn’t handled by css-modules. This is common approach because most of npm packages ships with compiled css so there is no reason to apply css-modules for them.

So I just added react-toolbox into app styles pipeline and all stuff start working as expected in docs.

// App styles
{
  test: /\.css$/,
  include: [
    path.join(__dirname, 'src'),
+   path.join(__dirname, 'node_modules/react-toolbox'),
  ],
  use: [
    ...,
    {
      loader: 'css-loader',
      options: {
        modules: true,
        ...
      },
    },
    ...
  ],
},
// Vendor styles should not be processed by css-modules
{
  test: /\.css$/,
  include: [path.join(__dirname, 'node_modules')],
+ exclude: [path.join(__dirname, 'node_modules/react-toolbox')],
  use: [
    ...,
    {
      loader: 'css-loader',
      options: {
        modules: false,
        ...
      },
    },
    ...
  ],
},

Also be noticed that latest css-loader depends on fresh postcss-modules-scope release that incompatible with postcss@5 (used by react-toolbox 2 beta). To be sure that your project uses compatible version you have to explicitly install postcss-modules-scope@1.0.2

This helped me out: https://github.com/react-toolbox/react-toolbox/issues/1054#issuecomment-267741717

@mulyoved remove the brackets, those pull in the named export which doesn’t have theming.

import Button from 'react-toolbox/lib/button/Button

Here’s the relevant source from the component:

const Button = factory(rippleFactory({ centered: false }), InjectFontIcon);
export default themr(BUTTON)(Button);
export { factory as buttonFactory };
export { Button };

You can see how only the default export from the component file has the theme functionality. If you use the {} you end up pulling that named Button export which is just the factory w/ ripple.

Tried all of the above methods. The one @alexlapinski proposed helped me get some of styles and animations, but it still doesn’t load all of them

I can get around the error by importing the raw component.

import { Button } from 'react-toolbox/lib/button/Button';

However the problem I have now is no styles are applied to the button. I have the ThemeProvider configured w/ the generated theme.js from toolbox, and it wraps the global App component.

import React from 'react';
import Shell from './ShellToolbox';
import './assets/toolbox/theme.css';
import theme from './assets/toolbox/theme';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';

const App = () => (
    <ThemeProvider theme={theme}>
        <Shell/>
    </ThemeProvider>
);

export default App;

Then I have a simple component as a test:

import React from 'react';
import {Button} from 'react-toolbox/lib/button/Button';

const Shell = () => (
    <Button label="Hello World!"/>
);

export default Shell;

The button renders w/ no styles, but if clicked the ripple effect shows. I’m guessing the ThemeProvider isn’t providing the theme.

This may need to be another issue, but I’ve followed the same path as @mulyoved