score:3

Accepted answer

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

score:1

try following

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

score:1

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.


Related Query

More Query from same tag