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

Question

我在导航栏中添加了一个按钮。 Navbar有4个.findbtn元素，第4个包含按钮。我想更改我想使用自定义CSS的按钮的默认颜色。

header.js：

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

我尝试将以下CSS属性添加到{{1}}类，但它不起作用。

在header.css中：

{{1}}

截图：

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

Answer 2

尝试以下

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

Answer 3

你可以试试这个：

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

如果上面的示例不起作用，请使用Developer Tools检查组件是否看到您的CSS代码。也许你忘了要求这个CSS文件。