如何應用自定義主題，材料UI

我想自定義主題應用到我的陣營組件閱讀本教程如何應用自定義主題，材料UI

http://www.material-ui.com/#/customization/themes

，我寫我的主題在一個單獨的JavaScript文件中像這樣

後

import Colors from 'material-ui/lib/styles/colors'; 
import ColorManipulator from 'material-ui/lib/utils/color-manipulator'; 
import Spacing from 'material-ui/lib/styles/spacing'; 
import zIndex from 'material-ui/lib/styles/zIndex'; 

export default { 
    spacing: Spacing, 
    zIndex: zIndex, 
    fontFamily: 'Roboto, sans-serif', 
    palette: { 
    primary1Color: Colors.cyan500, 
    primary2Color: Colors.cyan700, 
    primary3Color: Colors.lightBlack, 
    accent1Color: Colors.pinkA200, 
    accent2Color: Colors.grey100, 
    accent3Color: Colors.grey500, 
    textColor: Colors.deepPurpleA700, 
    alternateTextColor: Colors.white, 
    canvasColor: Colors.white, 
    borderColor: Colors.grey300, 
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), 
    pickerHeaderColor: Colors.cyan500, 
    } 
};

我申請這個主題我的組件在後續的方式

import React from 'react'; 
import mui from 'material-ui'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import ThemeManager from 'material-ui/lib/styles/theme-manager'; 
import Colors from 'material-ui/lib/styles/colors'; 
import MyTheme from './theme.js'; 

injectTapEventPlugin(); 

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      messages : [{id: 1, text: 'Hi'}, {id: 2, text: 'Hello'}] 
     }; 
    } 

    getChildContext() { 
     return { 
      muiTheme: ThemeManager.getMuiTheme(MyTheme) 
     }; 
    } 

    componentWillMount() { 
     let newMuiTheme = this.state.muiTheme; 
     this.setState({ 
      muiTheme: newMuiTheme, 
     });  
    } 

    render() { 

     var messageNodes = this.state.messages.map((message) => { 
      return (<div key={message.id}>{message.text}</div>); 
     }); 
     return (<div>{messageNodes}</div>); 
    } 
} 

App.childContextTypes = { 
    muiTheme: React.PropTypes.object 
}; 

export default App;

根據我的主題，當我的控件呈現它應該有一個「deepPurpleA700」顏色....但我的控制文本總是黑色。所以我的主題不適用。

我完整的代碼可以在https://github.com/abhitechdojo/MovieLensReact

來源

2016-01-24 Knows Not Much

我敢肯定你需要你的

getChildContext()

方法之前，有

static childContextTypes = { 
    muiTheme: React.PropTypes.object, 
};

。一旦完成，你應該能夠從刪除任何主題相關的東西componentWillMount（）

現在，這不適用於基本文本。但我可以證實這個主題正在被應用。我通過添加appBar組件並更改theme.js文件中的顏色來測試它。我還添加了一個帶有ListItems的List，並且該文本樣式是您正在尋找的。

這裏是修改後的App.jsx文件的gist的鏈接。

此外，作爲一個側面說明你server.js你有5行小錯字，你應該有

new webpackDevServer(webpack(config), {

不

new WebpackDevServer(webpack(config), {

來源

2016-01-24 15:18:27 mikedklein

你應該首先從「材料導入您的顏色-ui /形式/顏色，然後用它們在調色板對象是這樣的：

import React, { Component } from 'react'; 
import {render} from 'react-dom'; 
import {indigo500, indigo700, redA200} from 'material-ui/styles/colors'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin(); 

import Main from './Main'; 

const muiTheme = getMuiTheme({ 
    palette: { 
     primary1Color: indigo500, 
     primary2Color: indigo700, 
     accent1Color: redA200, 
     pickerHeaderColor: indigo500, 
    }, 
}); 

class App extends Component { 
    render() { 
     return (
      <div> 
       <MuiThemeProvider muiTheme={muiTheme}> 
        <Main /> 
       </MuiThemeProvider> 
      </div> 
     ); 
    } 
} 

render(<App/>, document.getElementById('app')); //you should be having a div with an id of app in your index.html file

和Main.js文件是

import React, { Component } from 'react'; 
import FloatingActionButton from 'material-ui/FloatingActionButton'; 


export default class Main extends Component { 
    render() { 
     return (
      <div> 
       <AppBar title="Title"/> 
       <FloatingActionButton secondary={true} /> 
      </div> 
     ); 
    } 
}

來源

2016-07-25 07:22:19

如何應用自定義主題，材料UI

回答

相關問題