如何在反应中使用2种成分，一种与另一种？

Question

我需要使用两个组件，其中之一将在另一个组件的下面，并且我需要与这两个组件进行交互。更具体地说，我需要使用react-particles-js模块，但无法与其交互。我已经尝试使用css z-index属性，但是它不起作用。

import Particles from 'react-particles-js'
import Screens from './screens'
...
class App extends Component {
  render() {
    return (
      <div>
        <Screens /> //this component has all screens of my application, and i use zIndex:'1' into Inputs, TextFields, Buttons and others components of Semantic UI...
        <Particles
          params={params}
          style={{ position: 'absolute', top: '0', zIndex: '0' }}
        />
      </div>
    )


  }
}

class ScreensLogin extends Component {
  ...
  <Form.Group>
  <Form.Input
    style={{ marginBottom: '28px', zIndex: '1' }}
    onChange={this.handleChange("email")}
    autoComplete="on"
    type='text'
    name='email'
    placeholder='Email'
    icon='mail'
    iconPosition='left'
    width={16}
    id='fieldEmail'
  />
</Form.Group>  

我必须对这段代码做什么才能正常工作？