I have several folders, my folder structure looks like this:
- src
- components
- login
- Login.js
- Login.css
- input
- Input.js
- Input.css
- login
- components
As you can see, I have several different component.
The Input.css looks like this:
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css');
. body {
background-color: green;
}
.account-settings .user-profile {
margin: 0 0 1rem 0;
padding-bottom: 1rem;
text-align: center;
}
.account-settings .user-profile .user-avatar {
margin: 0 0 1rem 0;
}
.account-settings .user-profile .user-avatar img {
width: 90px;
height: 90px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.account-settings .user-profile h5.user-name {
margin: 0 0 0.5rem 0;
}
.account-settings .user-profile h6.user-email {
margin: 0;
font-size: 0.8rem;
font-weight: 400;
color: #9fa8b9;
}
.account-settings .about {
margin: 2rem 0 0 0;
text-align: center;
}
.account-settings .about h5 {
margin: 0 0 15px 0;
color: #007ae1;
}
.account-settings .about p {
font-size: 0.825rem;
}
.form-control {
border: 1px solid #cfd1d8;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: .825rem;
background: #ffffff;
color: #2e323c;
}
.card {
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 0;
margin-bottom: 1rem;
}
What I want is that I can use Input.css in Input.js without that has effects on the other components. If I use Input.css like this, the body changes and the bootstrap css has effects on other components. I do not want that.
What I tried: Name Input.module.scss
.xtest {
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css');
body {
background-color: green;
}
h1 {
color: yellow;
}
.
.
.
}
import React, { useState } from 'react'
import style from './Input.module.scss'
const Input = () => {
const [profilPicture, setProfilPicture] = useState(false);
return (
<div className={style.xtest}>
<h1>Hello</h1>
<div classNameName="container">
<div className="row gutters">
<div className="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div className="card h-100">
<div className="card-body">
<div className="account-settings">
<div className="user-profile">
<div className="user-avatar">
{profilPicture === false &&
<i className="far fa-user-circle"></i>
}
{profilPicture === true &&
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Maxwell Admin" />
}
</div>
<h5 className="user-name">Yuki Hayashi</h5>
<h6 className="user-email">yuki@Maxwell.com</h6>
</div>
<div className="about">
<h5>About</h5>
<p>I'm Yuki. Full Stack Designer I enjoy creating user-centric, delightful and human experiences.</p>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
<div className="card h-100">
<div className="card-body">
<div className="row gutters">
<div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<h6 className="mb-2 text-primary">Personal Details</h6>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div className="form-group">
<label for="fullName">Full Name</label>
<input type="text" className="form-control" id="fullName" placeholder="Enter full name" />
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div className="form-group">
<label for="eMail">Email</label>
<input type="email" className="form-control" id="eMail" placeholder="Enter email ID" />
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div className="form-group">
<label for="phone">Phone</label>
<input type="text" className="form-control" id="phone" placeholder="Enter phone number" />
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div className="form-group">
<label for="website">Website URL</label>
<input type="url" className="form-control" id="website" placeholder="Website url" />
</div>
</div>
</div>
<div className="row gutters">
<div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<h6 className="mt-3 mb-2 text-primary">Address</h6>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div className="form-group">
<label for="Street">Street</label>
<input type="name" className="form-control" id="Street" placeholder="Enter Street" />
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div className="form-group">
<label for="ciTy">City</label>
<input type="name" className="form-control" id="ciTy" placeholder="Enter City" />
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div className="form-group">
<label for="sTate">State</label>
<input type="text" className="form-control" id="sTate" placeholder="Enter State" />
</div>
</div>
<div className="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div className="form-group">
<label for="zIp">Zip Code</label>
<input type="text" className="form-control" id="zIp" placeholder="Zip Code" />
</div>
</div>
</div>
<div className="row gutters">
<div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div className="text-right">
<button type="button" id="submit" name="submit" className="btn btn-secondary">Cancel</button>
<button type="button" id="submit" name="submit" className="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Input
However, when I use this scss, it also has no effects. Nothing happend at Input.js (background also turns not green). The h1 tag is displayed in yellow, but not the body. And the bootstrap has an impact on all other components
But how can I use the Input.css without it having effects on the other css files?
