CODEWITHSUNDEEP
javascriptreactjs
Bomber
Bomber

Reputation: 10957

React inline styles, applying styles from state

Using npm-inline-css module, I'm trying to change certain page elements colors, when storing the styles in a state. I set the state here:

setHeaderStyle: function(data){
    var headerStyles = this.state.defaultStyles;

    if(data) {
        headerStyles.backgroundColor = data.first_colour;
        headerStyles.color = data.theme;
    }
    this.setState({
        branding: data,
        headerStyles: headerStyles
    });
   },

Then I'm trying to apply the styles to the component:

  render: function (){
    return (
        <div className="our-schools-app">
          <InlineCss stylesheet="
            & .button {
                color: {{this.state.color}};
            }
            " />
            <RouteHandler />  
        </div>
    );
}

But they output like below. How can I set the inline styles? Or a better way I can do this?

<style scoped="" data-reactid=".0.0.1">#InlineCss-0 .button { color:     {{this.state.color
}

}
; 
}
</style>

Upvotes: 2

Views: 8518

Answers (1)

Pavan Ravipati
Pavan Ravipati

Reputation: 1870

From React Docs:

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.

It looks like you're most likely trying to set styles for a button that exists in components that are rendered in RouteHandler.

If that's the case, it would make the most sense for you to create a wrapper that wraps the other components and accepts the styles you're trying to set.

For example:

var PageWrapper = React.createClass({
  setHeaderStyle: function(data){
    var headerStyles = this.state.defaultStyles;
    if(data) {
      headerStyles.backgroundColor = data.first_colour;
      headerStyles.color = data.theme;
    }
    this.setState({
      branding: data,
      headerStyles: headerStyles
    });
  },
  render: function () {
    var buttonStyle = {
      color: this.state.color
    }
    return (
        <RouteHandler buttonStyle={buttonStyle} />
    );
  }
});

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <RouteHandler />
        </div>
    );
  }
});

var Signup = React.createClass({
  render: function() {
    return (
      <div>
        <p> Click below to signup now! </p>
        <button style={this.props.buttonStyle}>Click Me!</button>
      </div>
    );
  }
});

var Contact = React.createClass({
  render: function() {
    return (
      <div>
        <p> Click the button below to contact us </p>
        <button style={this.props.buttonStyle}>Email Us!</button>
      </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="page" handler={PageWrapper}>
      <Route path="signup" handler={Signup} />
      <Route path="contact" handler={Contact} />
    </Route>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

Edit: Per your request, as an example to show how nested routes would work, I added a Signup and Contact component. If you look at the routes variable you can see how I nested these components under PageWrapper.

Now the nested routes /#/page/signup and /#/page/contact will both get access to the props that are added to the <RouteHandler /> of PageWrapper. Hope this helps!!!!!

Upvotes: 5

Related Questions