如何在实现CSS中更改默认按钮的颜色？

Question

I have added a button in navbar. Navbar has 4 li elements and 4th contains button. I want to change the default color of the button I want to use custom css.

header.js:

class Header extends Component {

  render() {
    return (
      <div>   
        <div class="navbar-fixed">
          <nav className="navbar">
            <div className="nav-wrapper">
              <a href="#" className="brand-logo">Udacity Logo</a>
              <ul id="nav-mobile" className="right hide-on-med-and-down">
                <li><a href="#">Nanodegree</a></li>
                <li><a href="#">Hire Talent</a></li>
                <li><a href="#">For Business</a></li>
                <li><a className="waves-effect waves-light btn findbtn">Course Finder</a></li>
              </ul>
            </div>
          </nav>
         </div>
      </div>
    );
  }
}

I tried to add following CSS property to .findbtn class but it does not work.

In header.css:

.findbtn{
    background-color: #5E35B1;
}

Screenshot:

Answer 1

I just tried the code and it works

 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor(){ super() } render() { return ( <div> <div class="navbar-fixed"> <nav className="navbar"> <div className="nav-wrapper"> <a href="#" className="brand-logo">Udacity Logo</a> <ul id="nav-mobile" className="right hide-on-med-and-down"> <li><a href="#">Nanodegree</a></li> <li><a href="#">Hire Talent</a></li> <li><a href="#">For Business</a></li> <li><a className="waves-effect waves-light btn findbtn">Course Finder</a></li> </ul> </div> </nav> </div> </div> ); } } export default App; 

And in CSS file App.css you have to include

 .findbtn{ background-color: #5E35B1; } /* if it does not work try with background-color: #5E35B1 !important; may there is some css that is overriding the values */ 

If it does not work try with !important tag in css may be there is some other class which is not allowing to apply your css

Answer 2

Try following

a[classname='findbtn']{
background-color: #5E35B1;
}

Answer 3

You can try this:

.findbtn{
    background-color: #5E35B1 !important;
}

If above example not working, use Developer Tools for check whether component sees your CSS code. Maybe you forgot to require this CSS file.