React - Component inside another component

Question

I am new to react and I am building a small login form. I applied some global style in my App.css

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/raleway.ttf) format('woff');
}

body, html { 
  font-family: 'MyFont'
}

This is my App.js

import logo from './logo.svg';
import Navbar from "./components/Navbar/Navbar"
import Login from "./components/Login/Login"

import './App.css';

function App() {
  return (
    <div className="App">
      <Navbar/>
      <Login/>
    </div>
  );
}

export default App;

Then I have a Login components (src/components/Login/Login.js) where I am importing a Button component.

import React, { Component } from "react";
import './Login.css'
import Button from "../Button/Button"


class Login extends Component {
  render() {
    return (
      <div className="section">
        <form>
          <h3>Log in</h3>

          [...]

          <div className="form-group">
            <div className="custom-control custom-checkbox">
              <input
                type="checkbox"
                className="custom-control-input"
                id="customCheck1"
              />
            </div>
          </div>
          <Button type="submit"/>
        </form>
      </div>
    );
  }
}

And this is my Button component (src/components/Button/Button.js)

import React, { Component } from "react";
import './Button.css'


class Button extends Component {
    render() {
      return (
        <button>Login</button>
      );
    }
  }
  
  export default Button;

The button element does not use the style from App.js, the inherited style is override from something else as you can see on the picture. How can I fix this?

button.css

button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
  }

login.css

.section{
    background-color: pink;
    max-width: 400px;
    margin: auto;
}

.section form {
    padding: 10px;
    justify-content: center;
    text-align: center;
}

form input{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 15px;
  }

.form-group{
    margin: 1.5rem 0;
}

computed tab

Answer 1

To set Font for the whole page, you better use * { font-family: Myfont; } Make sure, MyFont is available and loaded.