Блог

Я новичок в react и создаю небольшую форму входа в систему. Я применил некоторый глобальный стиль в своем App.css

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

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

Это мой 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;
 

Затем у меня есть Login components ( src/components/Login/Login.js ), где я импортирую компонент Button.

 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>
    );
  }
}
 

И это мой Button компонент ( 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;
 

Элемент button не использует стиль из App.js , унаследованный стиль переопределяется чем-то другим, как вы можете видеть на картинке. Как я могу это исправить?

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;
}
 

вычисляемая вкладка

Чтобы установить шрифт для всей страницы, вам лучше использовать * { font-family: Myfont; } Make sure, MyFont доступен и загружен.