React 和 Material Ui 入门答案

【问题标题】：Getting start with React and Material UiReact 和 Material Ui 入门
【发布时间】：2016-09-27 10:50:04
【问题描述】：

我开始了解如何通过 React 使用 Material Ui，我越来越难以自定义组件。

我有这个 AppBar 的例子：

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';

const styles = {
title: {
   cursor: 'pointer',
 },
};

const AppBarExampleIconButton = () => (

<AppBar

title={<span styles={styles.title}>Portofolio</span>}

iconElementRight={<FlatButton label="Save" />} />

);

export default AppBarExampleIconButton;

我可以自定义标题，但是我想自定义 AppBar，在文档中 Style 对象覆盖了根元素的 inline-styles。但我不明白它的工作原理，有人可以帮助我吗？

【问题讨论】：

你试过谷歌搜索“反应引导教程”吗？
对于最有建设性的反馈，您应该尽最大努力自己研究这个主题。如果您在研究过程中遇到具体问题而您自己无法回答，您可以在 StackOverflow 上向他们询问具体答案！ Here 是构建好问题的指南。
感谢您的遮阳篷！！我明白！！我会尽力！！谢谢你
真的不明白为什么这是题外话 - 这很可能是 RTFM 的情况，但这是他列出的技术的特定开发人员问题。无论如何，答案@Hseleiro 可以在此处的文档中找到：material-ui.com/#/customization/themes 特别是在样式中说：“每个组件还有一个键，因此您可以使用它们来单独自定义它们”
还建议谷歌搜索“反应引导教程”是非常无用的，因为问题是关于材料用户界面而不是引导。

标签： javascript reactjs material-ui

【解决方案1】：

取决于您尝试做什么，您可以以多种方式自定义 AppBar。其中之一是如果您只想更改颜色等以制作 theme.js 文件并将其导入 MuiThemeProvider

您在应用程序的根文件中执行此操作。例

// Material Setup
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

// Our Own Theme
import theme from './layout/theme';

const Root = () =>
  <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
    <YourApp />
  </MuiThemeProvider>;

所以，如果你想内联，就像你说你在你的样式对象中创建一个对象，它是你想要应用到应用栏的 css。

const styles = { 
  appbar: {
    backgroundColor: 'blue'
  }
}

你称它为 AppBar 组件的道具

<AppBar style={styles.appbar} />

此外，如果您查看文档here，您可以看到标题有他自己的风格道具，请致电titleStyle

希望能帮到你。

【讨论】：