如何在现有的物化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