Inline Styles

Inline Styles

So far in the project we have been using basic inline styles, that work out-of-the-box in React. For a refresher, what we currently do looks like this:

var MyComponent = React.createClass({
  render() {
    return <Button style={styles.buttonStyle}>A Button</Button>;
  }
});

var styles = {
  buttonStyle: {
    borderRadius: 4,
  }
};

The only problem we have is that those inline styles do not get prefixed with vendor prefixes when required. This means that our styles will not work reliably cross browser. This is bad.

To allow us to still use inline styles, but to have them auto-prefixed we are going to start using a npm package called Radium. Radium will allow us to work in an almost identical fashion to the way we have been, but will add vendor prefixes for us automatically. There are a couple of small changes that will have to be made. To illustrate what needs to be changed we will take the example shown above, and modify it to work with Radium:

// must require the package
var Radium = require('radium');

var MyComponent = React.createClass({
  render() {
    return <Button style={styles.buttonStyle}>A Button</Button>;
  }
});

var styles = {
  buttonStyle: {
    borderRadius: 4,
  }
};

// We must wrap our component in the Radium component before exporting it.
module.exports = Radium(MyComponent); 

The rest of the usage can stay the same.

You will also need to use it in conjunction with MuiContextified in many components. To do so simply export like so:

module.exports = Radium(MuiContextified(MyComponent));

Note that the order of composition is very important. If you were to instead go MuiContextified(Radium(MyComponent)); this will break for certain Mui components.

Any component that you are working with that has styles specified, must use Radium. If you run across a component that isn't using Radium, but has styles defined, make sure you fix it to use Radium. If you create a new component, you must ensure that it uses Radium if you specify any styles in the component.