我如何管理CSS框架以仅在我的React App中使用一个组件

Question

我在React中建立了一个庞大的项目组合，由于样式框架，我真的很想避免重建整个项目的过程。这是这种情况：我正在将App.js导出为项目，并且因为我的组件专门为使用外部数据而构建，所以我选择在App.js中编写应用程序的这一部分，而不是将其作为另一个组件。

我的Materialize CSS框架是引起问题的原因，我需要它来正确显示我的className'card'，但是当我使用Materialize Framework时，它将破坏我页面的其余部分。例如，如何指定我的框架仅可用于一个div对象

我怎么说“仅将Materialize CSS Framework用于App3”

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;

Answer 1

基本上，您想要使用像这样的作用域样式

<div>
    <style scoped>
        @import "yourCssFileHere.css";
        <div class="card" style={{ width: '18rem' }}>
    </style>
</div>

您可以在http://css-tricks.com/saving-the-day-with-scoped-css/处获得更多帮助。