如何強制第三方React組件遵循樣式規則？

Question

反應並不支持重要的重寫任何被我使用的節點模塊（https://www.npmjs.com/package/react-snowfetti）的設置：

如果你看一下此模塊的構建過程中，高度和寬度都用數字設定，使他們不要使用窗口大小正確縮放。我只是想用它作爲我的着陸頁的背景。然而，我不能強迫這個組件停留在它的容器內。它也覆蓋了我放在屏幕上的任何文本，儘管它給了它一個z-index。

我決定重建我的網站在反應，以便這僅僅是最基礎的，現在：

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux' 
import Snowfetti from 'react-snowfetti'; 

import "./App.css" 

class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     } 
    } 

    render() { 
     return (
      <div> 
       <div className="landing_header"> 
        <h1>Coding on a cold day</h1> 
        <p>I find that things are nice and cold here</p> 
       </div> 
       <div className="snowfetti"> 
         <Snowfetti/>; 
       </div> 
      </div> 
     ) 
    } 
} 

export default App; 

和相關的CSS：

.landing_header { 
    z-index: 10000; 
    color: white; 
} 

.snowfetti { 
    z-index: -10000; 
    /* display: none; */ 
    width:800px; 
    height:600px; 
    overflow: hidden; 
} 

所有的一切，有一個簡單的，直接的方式迫使這個組件做我想要的？否則，我想我只會使用particlejs。

Answer 1

您應該能夠使用類似於以下模式的東西覆蓋自己的風格：

class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     } 
    } 

    render() { 
     const snowfettiStyles = { 
      zIndex: '-10000', 
      width: '800px', 
      height: '600px', 
      overflow: 'hidden' 
     }; 

     return (
      <div> 
       <div className="landing_header"> 
        <h1>Coding on a cold day</h1> 
        <p>I find that things are nice and cold here</p> 
       </div> 
       <div className="snowfetti"> 
         <Snowfetti styles={snowfettiStyles} /> 
       </div> 
      </div> 
     ) 
    } 
}