Meteor 如何使用材质UI管理员设置自定义应用程序栏高度和颜色？

我正在meteor应用程序中使用react material ui依赖项。我想知道如何更改我正在使用的AppBar的颜色和高度。通过使用内联样式来实现这一点是否可行？如果是，怎么做

injectTapEventPlugin（）；
var{AppBar}=MUI；
var{ThemeManager，LightRawTheme}=样式；
Header=React.createClass({
childContextTypes：{
muiTheme:React.PropTypes.object
},
getChildContext（）{
返回{
博物馆主题：Themeanager.getmuithem（LightRawTheme）；
}
;
},
渲染：函数（）{
返回(
);
}
});

有两种方法。一种是使用您提到的内联样式道具。这种方法并不完全有效：

使用内联样式很难覆盖它

另一种完全有效的方法如下。在
标题
组件中，选择在
render（）之前执行的生命周期方法
。由于您只是向下传递修改过的主题，因此我将使用
getChildContext（）
来演示：

getChildContext() {
  var myTheme = ThemeManager.getMuiTheme(LightRawTheme);

  //override the properties you want to
  //import Colors from 'material-ui/lib/styles/colors'
  myTheme.appBar.color = Colors.<choose-a-color>;
  myTheme.appBar.height = 50;

  //once done overriding, pass the theme using context
  return {
    muiTheme: myTheme
  };
}

getChildContext（）{
var myTheme=themanager.getmuithem（LightRawTheme）；
//覆盖要修改的属性
//从“材质ui/lib/styles/Colors”导入颜色
myTheme.appBar.color=颜色。；
myTheme.appBar.height=50；
//覆盖完成后，使用上下文传递主题
返回{
博物馆：神话博物馆
};
}

所有这些都在主题文档中提到。有关可覆盖的公开属性的列表，请参阅。
有两种方法。一种是使用您提到的内联样式道具。这种方法并不完全有效：

使用内联样式很难覆盖它

另一种完全有效的方法如下。在
标题
组件中，选择在
render（）之前执行的生命周期方法
。由于您只是向下传递修改过的主题，因此我将使用
getChildContext（）
来演示：

getChildContext() {
  var myTheme = ThemeManager.getMuiTheme(LightRawTheme);

  //override the properties you want to
  //import Colors from 'material-ui/lib/styles/colors'
  myTheme.appBar.color = Colors.<choose-a-color>;
  myTheme.appBar.height = 50;

  //once done overriding, pass the theme using context
  return {
    muiTheme: myTheme
  };
}

getChildContext（）{
var myTheme=themanager.getmuithem（LightRawTheme）；
//覆盖要修改的属性
//从“材质ui/lib/styles/Colors”导入颜色
myTheme.appBar.color=颜色。；
myTheme.appBar.height=50；
//覆盖完成后，使用上下文传递主题
返回{
博物馆：神话博物馆
};
}

所有这些都在主题文档中提到。有关可覆盖的公开属性的列表，请参见。
您可能希望远离
内联样式。看

所有材质UI组件的样式都是内联定义的。你可以
阅读关于这个决定以及这个决定的讨论线索
讨论JS中CSS的演示文稿

然而，我们在使用这种方法时遇到了重要的限制


由于在每次渲染时重新计算所有样式，因此性能较差
匆忙调试
服务器端媒体查询
服务器端伪元素
与服务器端渲染交互的时间更长（例如：悬停）


我们现在有了MaterialUIV1.0

材料用户界面v1.0
您有很多选择可以做到这一点-查看以了解它是如何工作的

如果这是你的主题
您有很多选择，这里有2个：
1使用刚刚编码的默认颜色

<AppBar color={'default'}>
...
</AppBar>

AppBar将为黑色
#000
您可能希望远离
内联样式
道具。看

所有材质UI组件的样式都是内联定义的。你可以
阅读关于这个决定以及这个决定的讨论线索
讨论JS中CSS的演示文稿

然而，我们在使用这种方法时遇到了重要的限制


由于在每次渲染时重新计算所有样式，因此性能较差
匆忙调试
服务器端媒体查询
服务器端伪元素
与服务器端渲染交互的时间更长（例如：悬停）


我们现在有了MaterialUIV1.0

材料用户界面v1.0
您有很多选择可以做到这一点-查看以了解它是如何工作的

如果这是你的主题
您有很多选择，这里有2个：
1使用刚刚编码的默认颜色

<AppBar color={'default'}>
...
</AppBar>

AppBar将为黑色，以减少高度使用：
variant=“dense”


窃窃私语

而要改变颜色，我认为最好的方法就是设定主题

    const theme = createMuiTheme({
      palette: {
        primary: amber,
        secondary: {
          main: '#f44336'
        }
      }
    });

    class App extends Component {
      render() {
        return (
          <MuiThemeProvider theme={theme}>{this.props.children}</MuiThemeProvider>
        );
      }
    }

const theme=createMuiTheme({
调色板：{
初级：琥珀色，
中学：{
主要内容：“#f44336”
}
}
});
类应用程序扩展组件{
render（）{
返回(
{this.props.children}
);
}
}
要降低高度，请使用：
variant=“dense”


窃窃私语

而要改变颜色，我认为最好的方法就是设定主题

    const theme = createMuiTheme({
      palette: {
        primary: amber,
        secondary: {
          main: '#f44336'
        }
      }
    });

    class App extends Component {
      render() {
        return (
          <MuiThemeProvider theme={theme}>{this.props.children}</MuiThemeProvider>
        );
      }
    }

const theme=createMuiTheme({
调色板：{
初级：琥珀色，
中学：{
主要内容：“#f44336”
}
}
});
类应用程序扩展组件{
render（）{
返回(
{this.props.children}
);
}
}