Question

我开始明白使用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对象覆盖根元素的内联样式。但我不明白它是否有效，有人可以帮助我吗？

Answer 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>;

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

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

你把它称为AppBar组件的道具

<AppBar style={styles.appbar} />

另外，如果你查看文档here，你可以看到标题有自己的风格道具，为他打电话titleStyle

希望能帮到你想出来。

开始使用React和Material Ui

1 个答案: