react-toolbox / react-toolbox-themr

A tool to statically extract and generate custom themes for React Toolbox
MIT License
240 stars 24 forks source link

Nested modules #17

Closed waclock closed 7 years ago

waclock commented 7 years ago

I've started a project from zero, and everything works up good up to the demo. However, when I try nesting components (for example, I have a main container, which contains a sidebar), I get the error

Module build failed: Error: composition is only allowed when selector is single :local class name not in ".raised", ".raised" is weird

does this mean not even with react-toolbox-themr it is possible to nest components without running into trouble? Since create-react-app does not provide a webpack config I'm not sure how to go on.

Any suggestions/explanations on what's going on would help.

Regards,

sparty02 commented 7 years ago

@waclock some repro examples would be helpful to better understand how you are using react-toolbox. I wonder if you are unintentionally consuming the components that bundle in css with them (which would be counter productive to what react-toolbox-themr is giving you the ability to do).

In short, instead of this:

import {Button} from 'react-toolbox/lib/button';  // also drags along baked in default styling

do this:

import Button from 'react-toolbox/lib/button/Button';  // styling provided via your theme and importing the generated css from react-toolbox-themr at the app level.
javivelasco commented 7 years ago

@sparty02 nailed it. That's the issue. Make sure you always import components raw when using this package!

cebindani commented 6 years ago

Guys, it's happening again in beta 12!

./node_modules/react-toolbox/lib/switch/theme.css Module build failed: Error: composition is only allowed when selector is single :local class name not in ".disabled", ".disabled" is weird at Array.map (native)

I'm doing this: import Snackbar from 'react-toolbox/lib/snackbar/Snackbar';

adabade1 commented 5 years ago

@cebindani Try doing import Snackbar from 'react-toolbox/lib/snackbar/Snackbar.js';