React：使用内联样式设置所有元素的样式

Question

I want to make all of my elements border-box. I want to do this:

* {
  box-sizing: border-box;
}

How is that possible to do in with React's inline styles? I don't want to write that rule in each component...

Answer 1

This is ill-advised since CSS will be much more efficient, manageable, and flexible. But if you REALLY wanted to have global inline React styles, I might do it like this:

var App = React.createClass({
    globalStyle: {
        boxSizing: "border-box"
    },
    render() {
        return (
            <div>
                <MyComponent globalStyle={this.globalStyle} />
            </div>
        );
    }
});

var MyComponent = React.createClass({
    style: {
        border: "1px solid black"
    },
    render() {
        return (
            <div style={Object.assign({}, this.props.globalStyle, this.style)}></div>
        );
    }
});

Basically pass global style down to components as props and have them incorporate it there.

Note that Object.assign() 's first parameter is a new empty object (so that we don't accidentally mutate our others) and that this.style comes last (so that it overrides any global styles.)

If you wanted the global style to change, you'd do it with React's component state instead and use getInitialState etc. I suppose that might actually be the only reason you'd want to do it this way.