Question

React不支持！重要的是覆盖我使用（https://www.npmjs.com/package/react-snowfetti）节点模块中设置的内容：

如果您查看此模块的构建过程，则高度和宽度由数字设置，因此它们不能正确缩放窗口大小。我只想将其用作登录页面的背景。但是，我不能强迫这个组件停留在容器内。它还覆盖了我放在屏幕上的任何文本，尽管给它一个z索引。

我决定在React重建我的网站，所以这只是现在的基础：

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>
        )
    }
}

如何强制第三方React组件遵循样式规则？

1 个答案: