Javascript 使用道具更改css

我需要帮助做出反应发生的事情是，我正在尝试学习如何使用react，而我在道具方面遇到了问题，目前我只想让我的组件产生效果，也就是说，我的组件开始透明，在大量滚动后，它变为实心，所以我在网上找到了一些例子，用一个道具改变css，但到目前为止我还没有结果，如果这里有人知道的话

Menu.js

import React, {Component} from 'react';
import { Menu, Image } from 'semantic-ui-react'
import logo from '../../imagen/logobefore.png'

import '../../App.css';

const MenuScrol = ({ EfectoCSS }) => (

  <div className={EfectoCSS} >
    <Menu inverted borderless>

      <Menu.Item as="h3" name="home" header>
        <a href='/'> HOME </a>
      </Menu.Item>

      <Menu.Item as="h3" name="trade" header> TRADE</Menu.Item>

      <Menu.Item as="h3" name="logo" header>
        <a href='/'>
          <Image src={logo} size='tiny' />
        </a>
      </Menu.Item>

      <Menu.Item as="h3" name="contacto" header> CONTACTO</Menu.Item>
      <Menu.Item as="h3" name="online" header> ONLINE</Menu.Item>

    </Menu>
  </div>
);

class MenuScroll extends Component {

  constructor(props) {
    super(props);

    this.state = {
      Efecto: 'hidden'
    }

  }

    componentDidMount() {
      window.onscroll = () => this.handleAnimation();
    }

    handleAnimation = () => {
      if (document.documentElement.scrollTop > 400) {
        this.setState({ Efecto: 'MenuEfecto' });
      }
    };

    render() {
      return (
        <MenuScrol EfectoCSS={this.state.Efecto}></MenuScrol>
      )
    }
  }
  export default MenuScroll;

.hidden {
  justify-content: center;
  width: 100%;
  z-index: 100;
  position: fixed;
  display: block;
  white-space: normal;
  background-color: transparent !important;
}
.MenuEfecto{
  justify-content: center;
  width: 100%;
  z-index: 100;
  position: fixed;
  display: block;
  white-space: normal;
  background-color: transparent;
  /* margin left - margin top - margin botton */
  animation-name: MenuEfecto;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes MenuEfecto{
  0% {
    background-color: transparent ;
  } 
  100% {
    background-color: transparent !important;
  }
}

---

使用过渡效果。例如<代码>转换：背景色1s易于输入输出并根据您的选择更改菜单项的

背景色

.hidden {
  justify-content: center;
  width: 100%;
  z-index: 100;
  position: fixed;
  display: block;
  white-space: normal;
  background-color: transparent;
}
.MenuEfecto{
  justify-content: center;
  width: 100%;
  z-index: 100;
  position: fixed;
  display: block;
  white-space: normal;
  background-color: black;
  transition: background-color 1s ease-in-out;
}

您还需要将语义UI的默认背景菜单颜色更改为“无”。
例如：

.ui.inverted.menu {
  background: none;
}

以下是一个工作示例：

使用语义UI的工作代码：
应该是您希望整个组件是透明的（不可见）还是仅背景色（文本将保持可见）？只有背景色，可见文本@DiogoPeresIt工作得很好，但使用语义（）不会更改背景，但我必须更改该组件的某些内容。现在的问题是，如果我编辑了响应，对中不起作用。您必须将语义ui的背景色设置为“无”才能变为透明；它不起作用。您可以在沙盒上执行一个工作示例，以便更容易理解吗？如果您希望菜单项在中心对齐，请执行以下操作：.ui.Menu{justify content:center；}。希望能有帮助