开始使用 React 和 Material Ui

Question

我开始理解使用 Material Ui 和 React，我越来越难以自定义组件。

我有这个 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 object 覆盖根元素的inline-styles。但我不明白它是否有效，有人可以帮助我吗？

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

所以如果你想像你说的那样内联执行此操作，你会在你的样式中创建一个 object object 谁是你想要应用到应用程序栏的 css。

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

并且你称它为 AppBar 组件的道具

<AppBar style={styles.appbar} />

此外，如果您查看文档 here，您可以看到标题中有他自己的风格道具，供他调用 titleStyle

希望能帮到你。

开始使用 React 和 Material Ui

Getting start with React and Material Ui

javascript

reactjs

material-ui