渲染需要服务器样式的React组件

Question

I have React.js components that require styles inside:

import './styles.css
import React from 'react';

export default class Basket extends React.Component {
    ...
}

Now I want to make my app isomorphic and prerender it on server..

There's no surprise that Babel starts to complain about css files:

SyntaxError: /Users/dmitri/github/app/src/client/pages/styles.css: Unexpected token (3:5)
  2 |
> 3 | body {
    |      ^
  4 |     background-color: #ddd;
  5 | }
  6 |

How to make it work? There's similar discussion on node-jsx - https://github.com/petehunt/node-jsx/issues/29

Should I add if (browser) statements for this imports?

Answer 1

It's a bit of a different approach, but check out Radium . You can declare your styles as JS objects, so the server won't have to know or care about what css is.

Example from the Radium page:

 var React = require('react'); var Radium = require('radium'); var color = require('color'); var Button = React.createClass(Radium.wrap({ displayName: "Button", propTypes: { kind: React.PropTypes.oneOf(['primary', 'warning']).isRequired }, render: function () { // Radium extends the style attribute to accept an array. It will merge // the styles in order. We use this feature here to apply the primary // or warning styles depending on the value of the `kind` prop. Since its // all just JavaScript, you can use whatever logic you want to decide which // styles are applied (props, state, context, etc). return ( <button style={[ styles.base, styles[this.props.kind] ]}> {this.props.children} </button> ); } })); // You can create your style objects dynamically or share them for // every instance of the component. var styles = { base: { padding: '1.5em 2em', border: 0, borderRadius: 4, color: '#fff', cursor: 'pointer', fontSize: 16, fontWeight: 700, // Adding interactive state couldn't be easier! Add a special key to your // style object (:hover, :focus, :active, or @media) with the additional rules. ':hover': { background: color('#0074d9').lighten(0.2).hexString() }, // If you specify more than one, later ones will override earlier ones. ':focus': { boxShadow: '0 0 0 3px #eee, 0 0 0 6px #0074D9', outline: 'none' }, }, primary: { background: '#0074D9' }, warning: { background: '#FF4136' } }; 

Remember, if you're not a fan of inline css, you could always define your styles in a separate JS and import them.

Answer 2

I have exactly the same needs as you. I use webpack for package my app. In webpack, you can define severals variables like this:

var define = new webpack.DefinePlugin({
    "process.env": {
        BROWSER: JSON.stringify(true)
    }
});

In my jsx file:

if (process.env.BROWSER) {
    require('my-css');
}

I think, there are other way to manage css. This is one way to do.