javascript - 如何管理 CSS 框架以在我的 React 应用程序中仅使用一个组件

Question

我在 React 中构建了一个大型组合，我真的想避免因为样式框架而重建整个元素的过程。情况是这样的:我正在为根目录导出 App.js元素，因为我的组件是专门为使用外部数据而构建的，所以我选择在 App.js 中编写我的应用程序的这一部分，而不是作为另一个组件。

我的 Materialise CSS Framework 是导致问题的原因，我需要它来正确显示我的类名“卡片”，但是当我使用 Materialize Framework 时，它会破坏我页面的其余部分。例如，如何指定我的框架仅处理一个 div 对象

我怎么说“只对 App3 使用 Materialise CSS 框架”

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/ .