如何使每个元素继承MUI主题属性，例如字形

Question

我正在使用MUI主题来设置Material UI组件的样式。

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