web-dev-qa-db-fra.com

Comment écraser des classes et des styles dans material-ui (React)

J'utilise la version 1.2.1 de material-ui et j'essaie d'écraser le composant AppBar pour qu'il soit transparent. La documentation explique comment écraser 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. Est-ce que j'essaie de remplacer le texte incorrect? Je ne sais pas où je me trompe ici ...

javascriptreactjsmaterial-designmaterial-ui
8
user818700

Cette réponse complète @Nadun answer - il mérite le crédit. Pour remplacer les classes matérielles, nous devons 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 devons utiliser une fonction d'ordre supérieur avec "withStyles" pour remplacer les classes matérielles ui

    export default withStyles(styles)(NavigationBar);

. Maintenant, ces styles nous sont disponibles en tant qu'accessoires dans la fonction de rendu, essayez de le faire - console.log(this.props.classes) - vous obtenez un nom de classe correspondant aux propriétés que vous incluez dans l'objet styles, comme - {root: "Instructions-root-101"}.

Ajoutez cela avec l'attribut classes

render() {
   const { classes } = this.props;
   return ( 
       <AppBar classes={{ root: classes.root }}>
        // Add other code here
       </AppBar>
   )
}
18
Sandeep Chikhale
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 comme:

backgroundColor: 'transparent !important'

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

j'espère que ceci vous aidera

2
Nadun