html - 如何更改 materialize css 中的默认按钮颜色？

Question

我在导航栏中添加了一个按钮。导航栏有 4 个 li 元素，第 4 个包含按钮。我想更改按钮的默认颜色我想使用自定义 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>
    );
  }
}

我试图将以下 CSS 属性添加到 .findbtn 类，但它不起作用。

在 header.css 中:

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

截图:

Answer 1

我刚刚尝试了代码并且它有效

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;

并且在 CSS 文件 App.css 中你必须包含

.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 */

如果它不起作用，请尝试在 css 中使用 !important 标签，可能是其他一些类不允许应用您的 css