How to override (overwrite) classes and styles in material-ui (React)

Question

I\'m using version 1.2.1 of material-ui and I\'m trying to override the AppBar component to be transparent. The documentation outlines how to override styles here.

My

Answer 1

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 (
      
        
          
        
      
    );
  }
}

export default withStyles(styles)(NavigationBar);

find the important part as :

backgroundColor: 'transparent !important'

refer this guide for more details: https://material-ui.com/customization/overrides/

hope this will help you