Search code examples
javascripthtmlcssreactjsradium

Radium inline CSS - on build export classes?

Is it possible to extract all inline Radium styles to classes so that html doesn't get ugly with all the inline styles?

I have this:

@Radium
class ExtendedComponent extends Component {
  render() {
    return (
      <div style={[styles.color, styles.box]}</div>
    );
  }
}

const styles = {
  color: {
    color: green
  },

  box: {
    borderColor: red,
    height: '20px',
    width: '20px'
  }
};

Right now output HTML looks something like this:

<div style="color: green; border-color: red; height: 20px; width: 20px;"></div>

I would for it to be something like:

<div class="c1"></div>

Where the CSS rules would include this:

.c1 {
  color: green;
  border-color: red;
  height: 20px;
  width: 20px;
}
Solution

  • Not that I'm aware of. By its very nature Radium is used to dynamically calculate and apply 'inline' styles and takes advantage of the React Component 'Module' by bundling up the styles within the JS.

    React Style From the list in link below, this seems to do what you need. See the section 'Extracting styles into CSS at build time' - https://github.com/js-next/react-style#extracting-styles-into-css-at-build-time

    Alternative libraries Here is a link to some alternatives which will do what you want: https://github.com/FormidableLabs/radium/tree/master/docs/comparison.