CSS не загружается для реакции, и меня смущает разница между файлом css компонентов и добавлением его в приложение. css в целом

Question

Это мой компонент заголовка

import React from "react";



function Header() {
  return (
<div classname = "header">
    <nav classname = "navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
        <div classname = "container">
            <button classname = "navbar-toggler" data-toggle="collapse" data-target = "#Navbar">
                <span classname = "navbar-toggler-icon"></span>
            </button>
            <a href = "/#" classname = "navbar-brand"><h3>Portfolio</h3></a>

<div classname="btn-group">
    <button type="button" classname="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      My networking
    </button>
    <div classname="dropdown-menu">
      <a classname="dropdown-item" href="https://docs.google.com/document/d/1iJ1v7HyfodCWvg5OSQIXbUATrBM9mPwdqeIzKuld1qs/edit">Resume</a>
      <a classname="dropdown-item" href="https://www.linkedin.com/in/tyler-goodman-39b289195/">LinkedIn</a>
      <a classname="dropdown-item" href="https://github.com/KawaiiSlave">Github</a>
    </div>
</div>

            <div classname = "collapse navbar-collapse" id = "Navbar">
                <ul classname = "navbar-nav ml-auto">
                    <li classname = "nav-item"><a href = "#About" classname = "nav-link">About Me</a></li>
                    <li classname = "nav-item"><a href = "#Skills" classname = "nav-link">Skills</a></li>
                    <li classname = "nav-item"><a href = "#Projects" classname = "nav-link">My Projects</a></li>
                    <li classname = "nav-item"><a href = "#Contact" classname = "nav-link">My Contact Info</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
  );
}

export default Header; 

Вот мое приложение. js file

import React from 'react';
import './App.css';
import Header from "./components/Header/header";
import About from './components/About/about';

function App() {
  return (
    <div className="App">
      <Header/>
      <About/>

    </div>
  );
}


export default App;

Я получил свои материалы для рендеринга, но я не понимаю, куда мне положить мой css. Включено ли это go в файл приложения. css или лучше внутри живого компонента, чем у этих компонентов css? Если бы кто-то мог привести пример со своим собственным css, это очень помогло бы. Я просто ошеломлен реакцией, начинающейся. Спасибо!

Answer 1

Если вы хотите создать спецификацию c CSS для ваших различных компонентов, вы можете использовать модули. Я склонен делать '1025 * модулей', когда создаю компонент, который буду часто использовать, например, модуль карты.

Если у вас есть компонент Card. js, например, вы можете создать файл с именем card.module.css.

в верхней части карты. js, я бы затем импортировал его, используя

import style from './card.module.css';

в пределах карты. js затем можно добавить className к элементу, использующему выражение JSX, которое обращается к импортированному style, например

<div className={style.header}>

В файле card.module. css, вы можете написать css для .header

.header {
  // your CSS here
}

Чтобы повторить, ваш файл Card. js будет иметь доступ к .header через импортированный 'style'. Если бы вы добавили больше CSS в свой модуль, например,

.wrapper {
  // your CSS here
}

, вы могли бы также получить доступ к этому на своей карте. js с помощью

className={style.wrapper}