web-dev-qa-db-fra.com

Comment appliquer un thème personnalisé dans une interface matérielle

J'essaie d'appliquer un thème personnalisé à mon composant React après avoir lu ce tutoriel.

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

J'ai écrit mon thème dans un fichier javascript séparé comme celui-ci

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

J'applique ce thème à mon composant de la manière suivante

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;

Selon mon thème, lorsque mon contrôle est rendu, il doit avoir une couleur "deepPurpleA700" .... mais mon texte de contrôle est toujours noir. Donc, mon thème n'est pas appliqué.

Mon code complet est disponible sur https://github.com/abhitechdojo/MovieLensReact

reactjsmaterial-ui
13
Knows Not Much

Je suis sûr que tu as besoin d'avoir

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

avant votre

getChildContext()

méthode. Une fois que cela est fait, vous devriez pouvoir supprimer tout élément lié au thème de composantWillMount ()

Maintenant, cela ne fonctionnera pas pour le texte de base. Mais je peux confirmer que le thème est appliqué. Je l'ai testé en ajoutant un composant appBar et en modifiant la couleur de votre fichier theme.js. J'ai également ajouté une liste avec ListItems et ce style de texte est ce que vous recherchez.

Voici un lien vers le Gist de votre fichier App.jsx modifié.

En outre, en tant que note secondaire dans votre server.js, vous avez une petite faute de frappe sur la ligne 5, vous devriez avoir 

new webpackDevServer(webpack(config), {

ne pas

new WebpackDevServer(webpack(config), {
4
mikedklein

Vous devez d'abord importer votre couleur à partir de 'material-ui/styles/colors' Puis les utiliser dans un objet palette comme suit: 

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

et le fichier Main.js est 

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

Pour moi cela a fonctionné avec:

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