如何在现有的materialize css按钮和导航栏中添加自定义CSS样式？

Question

我是新手来实现css。我制作了一个导航栏，其中有4个li标签，其中一个包含按钮。现在我想更改导航栏背景颜色和按钮大小应该调整大小。如何更改导航栏的默认颜色（红色）和按钮的默认颜色我还想调整按钮的大小。如何才能完成？

header.js：

import React, { Component } from 'react';

class Header extends Component {

  render() {
    return (
      <div>   
          <nav>
            <div class="nav-wrapper">
              <a href="#" class="brand-logo">Udacity Logo</a>
              <ul id="nav-mobile" class="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 class="waves-effect waves-light btn">Course Finder</a></li>
              </ul>
            </div>
          </nav>
      </div>
    );
  }
}

export default Header;

我应该在header.css中添加什么？

截图：

Answer 1

尝试向nav添加类<nav class="yourClassName">，并在此css类中设置颜色

.yourClassName{
   background:colorName
}

Simillary在这里添加另一个课程

<li><a class="waves-effect waves-light btn customClass">Course Finder</a></li>

.customClass{
   width:xxpx
}

如果默认属性未被覆盖，请使用!important