Question

我想将所有元素都设置为边框。我想这样做：

* {
  box-sizing: border-box;
}

如何使用React的内联样式？我不想在每个组件中写出该规则......

Answer 1

这是不明智的，因为CSS将更加高效，易于管理和灵活。但是，如果您真的想拥有全局内联React样式，我可能会这样做：

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>
        );
    }
});

基本上将全局样式作为道具传递给组件，并将它们合并到那里。

请注意，Object.assign()的第一个参数是一个新的空对象（这样我们就不会意外地改变我们的其他对象）并且this.style是最后一个（因此它会覆盖任何全局样式。）

如果您希望更改全局样式，请使用React的组件state代替getInitialState等。我想这可能实际上是您的唯一原因希望这样做。

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

1 个答案: