OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I style components without using the css of App.jsx in React

  • Thread starter Thread starter Jibril
  • Start date Start date
J

Jibril

Guest
I made a Component which is a card containing information, I made two of those and want them horizontally and spaced around.

I tried making a larger container in the scss for the Container, and that did not work. I used the App.css file and it worked but I want another way of doing it.

Here is the jsx and scss of the Component.jsx respectively

Code:
import "./Component.css"

const Component = (props) => {
  return (
    <>

    <div className="major-container">
      <div className="container">

  <div className="first-container">
    <div className="is-employed">
      <p>{props.isEmployed? <h2>true</h2>: <h2>false</h2>}</p>
    </div>

    <div className="salary">
      <p>{props.salary}</p>
    </div>
  </div>

  <div className="second-container">
    <div className="profile-picture-container">
      <img src={props.image} alt="" />
    </div>

    <div className="name-container">
      <p>{props.name}</p>
    </div>

    <div className="job-desc-container">
      <p>{props.jobDesc}</p>
    </div>
  </div>

  <div className="full-desc-container">
    <p>{props.name} {props.fullDesc}</p>
  </div>
      </div>
    </div>

    </>

  )
}

export default Component

Code:
.major-container {

    .container {
        border: 1px solid rgb(112, 52, 52);
        width: 400px;
        padding: 2rem;
        margin: 1rem;
        .first-container {
            
            .is-employed {
                
                p {
    
                }
            }
            .salary {
                p {
    
                }
            }
        }
    
        .second-container {
            .profile-picture-container {
                img {
                    width: 200px;
                    height: 200px;
                }
            }
    
            .name-container {
                //border: 2px solid red;
                p {
    
                }
            }
    
            .job-desc-container {
                p {
    
                }
            }
        }
    
        .full-desc-container {
            p {
    
            }
        }
    }
}

<p>I made a Component which is a card containing information, I made two of those and want them horizontally and spaced around.</p>
<p>I tried making a larger container in the scss for the Container, and that did not work. I used the App.css file and it worked but I want another way of doing it.</p>
<p>Here is the jsx and scss of the Component.jsx respectively</p>
<pre><code>import "./Component.css"

const Component = (props) => {
return (
<>

<div className="major-container">
<div className="container">

<div className="first-container">
<div className="is-employed">
<p>{props.isEmployed? <h2>true</h2>: <h2>false</h2>}</p>
</div>

<div className="salary">
<p>{props.salary}</p>
</div>
</div>

<div className="second-container">
<div className="profile-picture-container">
<img src={props.image} alt="" />
</div>

<div className="name-container">
<p>{props.name}</p>
</div>

<div className="job-desc-container">
<p>{props.jobDesc}</p>
</div>
</div>

<div className="full-desc-container">
<p>{props.name} {props.fullDesc}</p>
</div>
</div>
</div>

</>

)
}

export default Component
</code></pre>
<pre><code>.major-container {

.container {
border: 1px solid rgb(112, 52, 52);
width: 400px;
padding: 2rem;
margin: 1rem;
.first-container {

.is-employed {

p {

}
}
.salary {
p {

}
}
}

.second-container {
.profile-picture-container {
img {
width: 200px;
height: 200px;
}
}

.name-container {
//border: 2px solid red;
p {

}
}

.job-desc-container {
p {

}
}
}

.full-desc-container {
p {

}
}
}
}


</code></pre>
 

Latest posts

Online statistics

Members online
1
Guests online
5
Total visitors
6
Top