react-toolbox: Custom theme does not get applied to components.

I’m having issues with theming of components. I followed directions in the installation guide but styles do not get applied. I found someone with the exact same problem on SO: https://stackoverflow.com/questions/38026782/react-toolbox-how-to-apply-theme

My theme reads like this

// auth.component.css
.cardTitle {
  background-color: rgb(103,58,183);
}
.subtitle {
  outline-color: rgb(238,238,238);
}
.title {
  outline-color: rgb(250,250,250);
}

My component

// auth.component.tsx
const theme = require('./auth.component.css')

class Auth extends React.Component {

  render () {
    return (
      <Card style={{width: '350px'}} theme={theme}>
        <CardTitle
          title="Sign in"
          subtitle="Please enter your credentials"
          className={theme.cardTitle}
        />
        <CardText>
          Bla
        </CardText>
        <CardActions>
          <Button label="Sign in" primary={true} raised={true} />
        </CardActions>
      </Card>
    )
  }
}

What are we missing?

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 20 (5 by maintainers)

Most upvoted comments

Most programming languages, frameworks tools etc have a simple hello world kind of an intro into their own world. I find that missing with react-toolbox. Right after npm’ing the toolbox module I realized there were a few other tiny details that I needed to take care of separately. All of which are important but not discussed properly on their website. Instead, these details are discussed in various other places. After wasting much of the day collecting these responses I was lucky to run my first layout only to see black circles. I had already worked on Material-UI without much problems earlier. All of the styling requirements were handled well with radium. I was exploring a newer framework that had layouts and so exploring react-toolbox. I am running against a deadline and so gonna look else where maybe react-mdl.

Also the responses from the developers themselves are a bit strange. Instead of an elaborate verbose response a few simple examples would suffice most queries. Maybe they mean well but most developers work against deadlines. They need code to be working and are not interested in knowing elaborate details …

For instance “enble css modules webpack” and to handle “”“Module build failed: Error: composition is only allowed when selector is single :local class name not in “.raised”, “.raised” is weird “”” you must have these lines for a loader in webpack config…

{ test: /.css$/, loader: ‘style!css-loader?modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]’ }

for webpack 2

{ loader:‘css-loader’, options:{ modules:true, importLoaders:1, localIdentName:‘[name][local]_[hash:base64:5]’ } }

and this must be mentioned on the react toolbox webpage because apparently otherwise you cannot run your first hello world. This gives you a nice page with black circles for a ripple.

resagit on May 13, 2017

@resagit actually there are example repositories and you don’t even need to use webpack at all. The documentation itself is an example about how to use react-toolbox but it is very difficult to take care of responses in technical configuration issues, fixing bugs, releasing, updating changelogs, thinking about the future of the library… etc. Plus, you said developers, actually is developer and plenty of awesome sporadic contributors.

javivelasco on May 26, 2017