使用 React jsx 在页面渲染中重叠的组件

Question

I want to add multiple components to route but when they render they are overlapping one another at the top of the page. Individually they render fine, but when stacked in the.jsx route they overlap. I have tried many options to mitigate this without any change. I know I am missing something simple. Any help appreciated. Thank you.

Header component

    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;

Add New Form Component

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;

This is the route:

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


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

export default WTOminecaAddNew;

Answer 1

First I would make sure that you have installed the Bootstrap npm package so that the css styles you've applied will take proper effect.

Secondly, you can also over-ride the bootstrap styles (or add your own additional classes) - by including a locally imported css file.

Here is an example: https://react-u4gpvw.stackblitz.io

So in the React AddNewFileMT component, import a css file:

import "./NF.css";

And then in the css file, set over-riding styles to the bootstrap classes that are already in your html layout.

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