如何使每个元素都继承 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>
  );
}

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

How to make every element inherit MUI theme properties e.g. font

material-ui