How to change styles for components while we reusing in react? - reactjs

Question

I am working on react project, In that I have a parent component that is App.js. for that that App.js, Child.js is child component. In that Child.js I put one icon and apply styles.
Now I want to reuse that Child.js component with a different background color, different icon, different border color.
How to achieve this is in react
This is App.js
import React from 'react';
import './App.css';
import Child from './Child/Child'
function App() {
return (
<div className="App">
<Child></Child>
<Child></Child>
</div>
);
}
export default App;
This is Child.js
import React from 'react';
import './Child.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
function Child() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className='coffee' icon={faCoffee} />
</div>
</div>
</div>
</div>
)
}
export default Child
This is Child.css
.exp{
width:80px;
height:80px;
background-color:red;
border-radius:100%;
line-height:80px;
text-align:center;
vertical-align:middle;
display:inline-block;
border: solid 3px blue;
}
.coffee {
color: green;
}

Answer 1

You can create multiple classes in your css file and then pass in the prop of the class name and icon you want to use in the component.
<Child iconClass="coffee" icon={faCoffee}/>
function Child(props) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className={props.iconClass} icon={props.icon} />
</div>
</div>
</div>
</div>
)
}

Answer 2

You can add an icon props to render a JSX element in your Child component.
function Child({ icon }) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
{icon}
</div>
</div>
</div>
</div>
)
}
You can then write your Children component like this in your Parent component.
<Child icon={(<FontAwesomeIcon className='coffee' icon={faCoffee} />)} />

Answer 3

Make the child to accept props and pass props when you render the component.
function Child({ icon, className}) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className={className} icon={icon} />
</div>
</div>
</div>
</div>
)
}
export default Child
Then use it like
<Child icon="faCoffee" className="style" />
<Child icon="faBars" className="style" />