Reagieren: Stil alle Elemente mit Inline-Stilen

Question

Ich möchte alle meine Elemente border-box machen. Ich möchte, dies zu tun:

* { 
    box-sizing: border-box; 
} 

Wie ist das möglich zu tun mit der Reaktion Inline-Styles? Ich möchte diese Regel nicht in jede Komponente schreiben ...

Answer 1

Dies ist nicht ratsam, da CSS viel effizienter, überschaubarer und flexibler ist. Aber wenn man wirklich wollte Stile Reagieren globale Inline haben, ich könnte es wie folgt tun:

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

Grundsätzlich globalen Stil überliefern zu Komponenten wie Requisiten und haben sie es dort einzubauen.

Beachten Sie, dass Object.assign() s erste Parameter ein neues leeres Objekt ist (so, dass wir unsere anderen nicht versehentlich mutieren) und dass this.style zuletzt kommt (so dass es keine globale Stile außer Kraft setzt.)

Wenn Sie wollten den globalen Stil zu ändern, würden Sie es mit React-Komponente state stattdessen tun und getInitialState usw. verwenden. Ich nehme an, dass das möglicherweise der einzige Grund sein würde, wollen Sie, um es so zu tun.