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

so click at the Tab "Computed" in your dev-console and found those overwritten styles. There you see, which other style overwrites it (thats only as hint how you can found which style is overwriting another one). For the rest of your request, we need the real files that are used here... means what's about login.css, button.css ...? — suther
– suther, Commented Nov 20, 2020 at 9:05
what about the dev-console output for "Computed"? BTW: your button.css is written in capital letter, or lower-case? — suther
– suther, Commented Nov 20, 2020 at 9:10

suther · Accepted Answer · 2020-11-20 09:47:59Z

2

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

edited Nov 20, 2020 at 9:47

answered Nov 20, 2020 at 9:41

suther

13.8k6 gold badges73 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Malakai Over a year ago

Extra tip - I bet you want also use CSS Reset (normalize.css) just to make sure that browser doesn't apply some unwanted styles on top of your components.

Collectives™ on Stack Overflow

React - Component inside another component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related