wake-up-neo.com

Wie man ein benutzerdefiniertes Thema im Material ui anwendet

Ich versuche, ein benutzerdefiniertes Thema auf meine React-Komponente anzuwenden, nachdem Sie dieses Tutorial gelesen haben

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

Ich habe mein Thema in einer separaten Javascript-Datei wie dieser geschrieben

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

Ich wende dieses Thema folgendermaßen auf meine Komponente an

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;

Laut meinem Design sollte mein Steuerelement eine "deepPurpleA700" -Farbe haben ..., aber mein Kontrolltext ist immer schwarz. Mein Thema wird also nicht angewendet.

Mein vollständiger Code ist verfügbar unter https://github.com/abhitechdojo/MovieLensReact

13
Knows Not Much

Ich bin mir ziemlich sicher, dass du es brauchst

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

vor deinem

getChildContext()

methode. Sobald dies erledigt ist, sollten Sie in der Lage sein, alle themenbezogenen Inhalte aus .__ zu entfernen. componentWillMount ()

Dies funktioniert jetzt nicht für Basistext. Ich kann jedoch bestätigen, dass das Thema angewendet wird. Ich habe es getestet, indem ich eine appBar-Komponente hinzugefügt und die Farbe in Ihrer theme.js-Datei geändert habe. Ich habe auch eine Liste mit ListItems hinzugefügt, und dieser Textstil ist das, wonach Sie suchen.

Hier ist ein Link zu Gist Ihrer geänderten App.jsx-Datei.

Als Randnotiz in server.js haben Sie einen kleinen Tippfehler in Zeile 5, den Sie haben sollten 

new webpackDevServer(webpack(config), {

nicht

new WebpackDevServer(webpack(config), {
4
mikedklein

Sie sollten zuerst Ihre Farbe aus 'material-ui/styles/colors' Importieren und diese dann in einem Palettenobjekt wie folgt verwenden: 

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

und die Main.js-Datei ist 

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>
        );
    }
}
11
sanyam kumar

Bei mir funktionierte es mit:

import React, {Component} from 'react';
import {createMuiTheme} from '@material-ui/core/styles';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#0b5994',
        },
        secondary: {
            main: '#1d83c6',
        },
    },
});

class App extends Component {

    render() {
        return (
            <div className="App">
                <MuiThemeProvider theme={theme}>
                    /* content here! */
                </MuiThemeProvider>
            </div>
        );
    }
}

export default App;
1
RichArt