Inline styling

[philohelp]

As mantra's mission is dedicated to modularity and high maintainability, it feels strange that all styles in the app are locked in a big old fashioned centralized .css.

I changed that for Radium which I didn't know and it works like a charm - just wrap the default layout and then you get clever inline styles wherever you want in the app.

export default class extends React.Component  {
render() {
  const styles = {
    myfavoritebutton: {
      color-background: 'fuschia'
      }
   };
etc.

then :

<Button style={styles.myfavoritebutton}></Button>

There are plenty of other solutions which I didn't try - this one appearing to be the most popular.

[sandervanhooft]

I think this is an interesting issue and fix. Another way to keep it modular would be to put a styles.css (or less/...) in the module.

Is there an agreed way handling this in the React community? I started learning React when trying out Mantra, so I don't know.

[makstr]

When I originally started working on this the objective was to pull in a minimal bootstrap theme and make it work. I agree we should consider a more modular approach. Will think on this

[jiku]

Radium works pretty well here too, doing something like Component = Radium(Component) with Component being stateless.

[sandervanhooft]

I'll look into that. I've tried to get react-bootstrap to work, but no success. Posted an issue at the Mantra repo for that.

[philohelp]

your issue was closed (maybe misunderstood "solves the issue" ?)

I like this too - with react-styling :

const style = styler
`
  card
    padding-bottom: 0
`

[sandervanhooft]

Did you get that to work with this kickstarter?

[philohelp]

Yes apparently the react-styling lib works fine with radium, both from NPM. For bootstrap I got both bootstrap sass as Meteor package and react bootstrap as NPM. I will try and change that soon. I do import Grid from 'react-bootstrap/lib/Grid';