<div id="app"></div>
body {
  background-color: #5225bd;
}

#app {
  text-align: center;
}

p {
  color: #FFF;
  font-size: 32px;
}
const ThemeContext = React.createContext('light')

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="Valor de prueba">
        <First />
      </ThemeContext.Provider>
    )
  }
}

class First extends React.Component {
  render() {
    return (
      <Second />
    )
  }
}

class Second extends React.Component {
  static contextType = ThemeContext;

  render() {
    return (
      <p>Valor Context: <strong>{this.context}</strong></p>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js