I am currently working on a large portfolio project in React and I want to avoid the hassle of rebuilding the entire project just because of a styling framework. The issue I am facing is that when I use Materialize CSS Framework, it affects other parts of my page instead of just the specific div object where I need it to work correctly, like for the className 'card'.
How can I instruct the Materialize CSS Framework to only apply to a particular section, say 'App3', without affecting the rest of the page?
import React, { Component } from 'react';
import Header from './components/Header';
import About from './components/About';
import Resume from './components/Resume';
import Portfolio from './components/Portfolio';
import Testimonials from './components/Testimonials';
import ContactUs from './components/ContactUs';
import Footer from './components/Footer';
import resumeData from './resumeData';
class App extends Component {
render() {
return (
<div className="App">
<Header resumeData={resumeData}/>
<About resumeData={resumeData}/>
<Resume resumeData={resumeData}/>
<Portfolio resumeData={resumeData}/>
<div className="App3">
<div class="card" style={{ width: '18rem' }}>
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src={weatherImage}></img>
</div>
<div class="card-content">
<span class="card-title activator grey-text text-dark-4">
<i class="material-icons-right"><img src={iconUrl}></img></i></span>
</div>
<div class="card-reveal">
<span class="card-title activator grey-text text-dark-4">{this.state.cityName}
<i class="material-icons-right"><img src={iconUrl}></img></i></span>
<div className="row">
<div className="col s6 offset-s3">
<form onSubmit={this.searchCity}>
<input type="text" id="city" placeholder="City..."></input>
</form>
</div>
</div>
</div>
</div>
</div>
`
<Testimonials resumeData={resumeData}/>
<ContactUs resumeData={resumeData}/>
<Footer resumeData={resumeData}/>
</div>
);
}
}
export default App;