React: стиль всех элементов со встроенными стилями

Question

Я хочу сделать все мои элементы border-box. Я хочу это сделать:

* { 
    box-sizing: border-box; 
} 

Как это можно сделать с встроенными стилями React? Я не хочу писать это правило в каждом компоненте ...

Answer 1

Это не рекомендуется, так как CSS будет намного более эффективным, управляемым и гибким. Но если вы действительно хотели иметь глобальные рядные Реагировать стили, я мог бы сделать это следующим образом:

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() «s новый пустой объект (так что мы не случайно мутировать наши другие) и что this.style приходит последним (так, что она перекрывает любые глобальные стили.)

Если вы хотите глобальный стиль для изменения, вы должны сделать это с помощью компонента React state и использовать getInitialState и т. д. Я полагаю, что на самом деле это единственная причина, по которой вы должны были бы хотеть сделать это таким образом.