Comment faire pour remplacer les classes de styles et de matériaux-ui (Réagir)

J'utilise la version 1.2.1 de matériel-ui et je suis en train de remplacer le AppBar composant transparent. La documentation décrit comment remplacer les styles ici.

Mon code:

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';

class NavigationBar extends Component {
  render() {
    const styles = {
      root: {
        backgroundColor: 'transparent',
        boxShadow: 'none',
      },
    };

    return (
      <AppBar position={this.props.position} classes={{ root: styles.root }}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
  }
}

export default NavigationBar;

Mais cela ne donne aucun résultat. Suis-je en train d'écraser le mal? Vous ne savez pas où je vais mal ici...

InformationsquelleAutor | 2018-06-13
  1. 13

    Cette réponse fait @Nadun réponse complète - il le mérite.
    Pour remplacer le matériel classes de l'interface utilisateur, nous avons besoin de comprendre ces choses:

    1. Ajoutez vos styles dans une variable const en haut

        const styles = {
      root: {
        backgroundColor: 'transparent !important',
        boxShadow: 'none',
        paddingTop: '25px',
        color: '#FFFFFF'
      }
    };

    2. Nous avons besoin d'utiliser d'ordre supérieur de la fonction avec "withStyles" pour remplacer le matériel classes de l'interface utilisateur

        export default withStyles(styles)(NavigationBar);

    3. Maintenant, ces styles sont disponibles comme accessoires dans la fonction rendu
    essayez de faire cela - console.log(this.props.classes) - vous obtenez une classes nom correspoding de propriétés de vous inclure dans les styles d'objet,
    comme - {root: "Instructions-root-101"}.

    Ajouter qu'avec les classes de l'attribut

    render() {
   const { classes } = this.props;
   return ( 
       <AppBar classes={{ root: classes.root }}>
        //Add other code here
       </AppBar>
   )
}
    InformationsquelleAutor Sandeep Chikhale
  2. 2
    import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  transparentBar: {
    backgroundColor: 'transparent !important',
    boxShadow: 'none',
    paddingTop: '25px',
    color: '#FFFFFF'
  }
};

class NavigationBar extends Component {
  render() {
    return (
      <AppBar className={classes.transparentBar}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
  }
}

export default withStyles(styles)(NavigationBar);

    trouver la partie importante que :

    backgroundColor: 'transparent !important'

    consultez ce guide pour plus de détails: https://material-ui.com/customization/overrides/

    espère que cela va vous aider à

    • Cette réponse est incomplet et n'est pas en mesure de résoudre le problème. J'ai inclure réponse complète ci-dessous
    InformationsquelleAutor Nadun