Блог

Я хочу добавить несколько компонентов в route, но при рендеринге они перекрывают друг друга в верхней части страницы. По отдельности они отображаются нормально, но при укладке в маршрут .jsx они перекрываются. Я перепробовал много вариантов, чтобы смягчить это без каких-либо изменений. Я знаю, что мне не хватает чего-то простого. Любая помощь приветствуется. Спасибо.

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

     import React from "react";

const Header = () => {
    return (
        <div className="fixed-top border-bottom">
            <h1 className="font-weight-medium display-1 text-center">
                Master Tracker
            </h1>
            <h3 className="font-weight-light text-center">
                Welcome to the Master Tracker System
            </h3>
        </div>
    );
};

export default Header;
 

Добавить новый компонент формы

 import React from "react";

const AddNewFileMT = () => {
    return (
        <div className="m-2 pt-6 position-relative">
            <h2>
                Add New File to Master Tracker
            </h2>
            <form action="">
                <div className="row">
                    {/* Row 1 Column 1 */}
                    <div className="col-md-6">
                        <div className="form-group">
                            <label htmlFor="fcbc-rec-date">FCBC RECEIVED DATE</label>
                            <input type="text" className="form-control" placeholder="15/12/2020" id="fcbc-rec-date"/>
                        </div>
                    </div>
                    {/* Row 1 Column 2 */}
                    <div className="col-md-4">
                        <div className="form-group">
                            <label htmlFor="vfcbc">vFCBC</label>
                            <input type="text" className="form-control" placeholder="123456" id="vfcbc"/>
                        </div>
                    </div>
                    {/* Row 1 Column 3 */}
                    <div className="col-md-2">
                        <legend className="col-form-label">MULTIAGENCY</legend>
                        {/* CHECKBOX YES */}
                        <div className="form-check-inline">
                            <input className="form-check-input" type="checkbox" id="multiagency"/>
                            <label className="form-check-label" for="multiagency">
                                YES
                            </label>
                        </div>
                        {/* CHECKBOX NO */}
                        <div className="form-check-inline">
                            <input className="form-check-input" type="checkbox" id="multiagency"/>
                            <label className="form-check-label" for="multiagency">
                                NO
                            </label>
                        </div>
                    </div>
                </div>

                
            </form>
        </div>
    );
};

export default AddNewFileMT;
 

Это маршрут:

 import React from 'react';
import Header from '../components/Header';
import AddNewFileMT from '../components/AddNewFileMT';


const WTOminecaAddNew = () => {
    return (
        <div>
            <Header />
            <AddNewFileMT />
        </div>
    );
};

export default WTOminecaAddNew;

 

Сначала я бы убедился, что вы установили пакет Bootstrap npm, чтобы примененные вами стили css вступили в силу должным образом.

Во-вторых, вы также можете переопределить стили начальной загрузки (или добавить свои собственные дополнительные классы), включив локально импортированный файл css.

Вот пример: https://react-u4gpvw.stackblitz.io

Итак, в компоненте React AddNewFileMT импортируйте файл css:

 import "./NF.css";
 

А затем в файле css задайте переопределяющие стили для классов начальной загрузки, которые уже есть в вашем html-макете.

 .form-group {
  border: 2px solid rgb(136, 136, 179);
  padding: 4px;
}

label {
  margin-right: 20px;
}

legend {
  padding: 8px;
  border: 2px solid rgb(136, 136, 179);
}

.form-check-label {
  padding-left: 8px;
}

.form-check-inline {
  padding: 8px;
  border: 2px solid rgb(136, 136, 179);
}