Как заставить каждый элемент наследовать свойства темы MUI, например. font

Question

Я использую тему MUI для создания компонентов интерфейса материала.

getChildContext() { 
    return { 
    muiTheme: getMuiTheme(Theme), 
    }; 
} 

Я хочу, чтобы некоторые свойства повлияли на всех детей, в частности на шрифт.

В настоящее время решение заключается в создании глобальных стилей с помощью CSS, но это кажется субоптимальным, поскольку он дублирует код.

Answer 1

Тема Material-UI, которую вы используете в контексте, потребляется только компонентами, которые читают и используют ее.

Самый простой способ сделать некоторые из этих стилей доступными для других компонентов в иерархии - использовать их встроенные в свой компонент верхнего уровня, следуя шаблону, который вы найдете в любом компоненте Material-UI.

static contextTypes = { 
    muiTheme: PropTypes.object.isRequired, 
}; 

render() { 
    const styles = { 
    fontFamily: this.context.muiTheme.fontFamily 
    }; 

    return (
    <div style={styles}> 
     <MyApp /> 
    </div> 
); 
}