Переменная (пропс), которая будет доступна в любом дочернем компоненте (Контекст)

Когда один и тотже параметр (пропс) используется дочерними компонентами, то данный пропс дублируется каждым компонентом.

class ButtonGroup extends React.Component {    
    render() {
        return (
            <div>
                <Button theme={this.props.title}>Кнопка 1</Button>
                <Button theme={this.props.title}>Кнопка 2</Button>
                <Button theme={this.props.title}>Кнопка 3</Button>
            </div>
        );
    }
}

Пример кода на JSFiddle

Через контекст (англ. context) можно указать, что данный параметр будет доступен в любом дочернем компоненте.

// Создание контекста ("light" по умолчанию)
const ThemeContext = React.createContext('light');

class ButtonGroup extends React.Component {    
    render() {
        return (<div>
            <ThemeContext.Provider value={this.props.theme}>
                <Button>Кнопка 1</Button> 
                <Button>Кнопка 2</Button> 
                <Button>Кнопка 3</Button>
            </ThemeContext.Provider>
        </div>);
    }
}

ReactDOM.render(<ButtonGroup theme="dark" />, document.getElementById("app"));

В дочерних компонентах, указанный в <ThemeContext>, можно получить указанный параметр через свойство {this.context}.

class Button extends React.Component {

    // Получение значение контекста
    static contextType = ThemeContext;
    
    render() {
        return (
            <button className={this.context}>{this.props.children}</button>
        );
    }
}

Пример кода на JSFiddle