I have created two separate components in my 'create react app'. For each component, I have a dedicated style sheet. If I use the same classNames inside both components then the style gets inherited to the other component as well.
Here, In my case even if I keep the Quote.scss file empty, the style gets inherited from the contact.css file from the Contact component.
Here, you can see I'm not importing the Contact.css style sheet in Quote.jsx file.
Is there any way to avoid it while still using the same classNames across different components?
My folder structure inside the project-
ContactPage
Contact.jsx
Contact.scss
Contact.css
QuotePage
Quote.jsx
Quote.scss
Quote.css
Contact.jsx file-
import "./Contact.css";
import React, {useState} from 'react';
import axios from "axios";
<div className="form">
<div className='container'>
<div className="input-row">
<div className="block">
<label>First Name</label>
<input className="input" type="text" name="fName" onChange={handleChange} value={postData.fName} />
</div>
<div className="block">
<label >Last Name</label>
<input className="input" type="text" name="lName" onChange={handleChange} value={postData.lName}/>
</div>
</div>
<div className="input-row">
<div className="block">
<label>Email</label>
<input className="input is-success" type="email" name="email" onChange={handleChange} value={postData.email}/>
</div>
<div className="block">
<label >Phone</label>
<input className="input" type="tel" name="phone" onChange={handleChange} value={postData.phone}/>
</div>
</div>
<div className="textarea-row">
<div className="block">
<label >Message</label>
<textarea className="textarea" name="message" onChange={handleChange} value={postData.message}></textarea>
</div>
</div>
{/* row-3 */}
<div className="btn-row">
<button className="submit-btn" onClick={handleSubmit}>Submit</button>
<button className="cancel-btn" onClick={handleCancel}>Cancel</button>
</div>
<div className='submit-message'>
<h1>{message}</h1>
</div>
</div>
</div>
My Contact.scss file-
@mixin section {
padding: 4rem 0;
height: auto;
}
@mixin container {
width: auto;
height: auto;
max-width:1100px;
padding: 0 40px;
margin: 0 auto;
align-items:center;
@media screen and (max-width:768px){
grid-template-columns: 1fr;
grid-gap: 1rem;
width: auto;
height: auto;
max-width:none;
padding: 0 40px;
margin: 0 auto;
align-items:none;
}
}
label{
font-weight: 400;
}
.form{
@include section;
.container{
@include container;
display: grid;
grid-template-rows: auto auto auto auto;
grid-row-gap: 2rem;
.input-row{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
input{
padding-left: 1rem;
height: 2.5rem;
outline: coral solid 1px;
border: none;
font-size: 1.2rem;
font-weight: 100;
&:focus {
outline: #0b5a68 solid 1px;
border: none;
box-shadow: 0 0 4px #0b5a68;
}
}
@media screen and (max-width:768px){
grid-template-columns: 1fr;
align-self: center;
justify-content: center;
}
.block{
display: grid;
grid-template-rows: auto auto;
grid-gap:.25rem;
}
}
.textarea-row{
@media screen and (max-width:768px){
grid-template-columns: auto;
align-self: center;
justify-content: center;
}
.block{
display: grid;
grid-template-rows: auto auto;
grid-gap:.25rem;
@media screen and (max-width:768px){
grid-template-columns: 1fr;
align-self: center;
justify-content: center;
}
textarea{
padding-left: 1rem;
height: 2.5rem;
outline: coral solid 1px;
border: none;
&:focus {
outline: #0b5a68 solid 1px;
box-shadow: 1px 1px 20px #0b5a68;
border: none;
box-shadow: 0 0 4px #0b5a68;
}
height: 4rem;
padding: 1rem 0 0 1rem;
font-size: 1.2rem;
font-weight: 100;
}
}
}
.btn-row{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap:1rem;
@media screen and (max-width:768px){
grid-template-columns: auto;
align-self: center;
justify-content: center;
grid-template-columns: 1fr 1fr;
}
.submit-btn{
display: grid;
justify-content: center;
align-items: center;
width: 100%;
color: white;
background-color: #108397;
border: solid #108397 2px;
border-radius: 4px;
padding: 1rem 1rem;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
outline: none;
&:hover{
background-color: #0b5a68;
border: solid #0b5a68 2px;
transition: ease .3s;
}
}
.cancel-btn{
display: grid;
justify-content: center;
align-items: center;
width: 100%;
color: white;
background-color: #df60b5c7;
border: solid #df60b59c 2px;
border-radius: 4px;
padding: 1rem 1rem;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
outline: none;
&:hover{
background-color: #b4348a;
border: solid #b4348a 2px;
transition: ease .3s;
}
}
}
}
}
My Quote.jsx file-
import './Quote.css';
import React, { useState } from 'react';
import axios from 'axios';
<div className="form">
<div className='container'>
<fieldset className='preference'>
<legend>Select your preference</legend>
<div className="preference-row">
<input className="check" checked={radio==="short-term-use"} onChange={e=>setRadio(e.target.value)} type="radio" name="shortTermUse" value="short-term-use" />
<label for="short-term-use">Short Term Use</label>
</div>
<div className="preference-row">
<input className="check" checked={radio==="long-term-use"} onChange={e=>setRadio(e.target.value)} type="radio" name="longTermUse" value="long-term-use" />
<label for="long-term-use">Long Term Use</label>
</div>
</fieldset>
<div className="btn-row">
<button className="submit-btn" onClick={handleSubmit}>Submit</button>
<button className="cancel-btn" onClick={handleCancel}>Cancel</button>
</div>
</div>
</div>
My Quote.scss file-
// it's empty
React does not have class encapsulation by default, you can read this article about your options if you do want to achieve CSS style encapsulation
Also see CSS modules as mentioned by @Jacob Smit in a comment bellow.