title: Use of prop to change the css
body: <p>I need help to react What happens is that I am trying to learn how to use react and I have had problems for the props, currently all I want is for my component to have an effect, that is, my component starts transparent and after a quantity of scroll This becomes solid, so I found some examples on the internet to make the change of css with a prop, but so far I have not had result, if any here knows </p>
  
  <p><strong>Menu.js</strong></p>
  
  <pre><code>
  import React, {Component} from 'react';
  import { Menu, Image } from 'semantic-ui-react'
  import logo from '../../imagen/logobefore.png'
  
  import '../../App.css';
  
  const MenuScrol = ({ EfectoCSS }) =&gt; (
  
    &lt;div className={EfectoCSS} &gt;
      &lt;Menu inverted borderless&gt;
  
        &lt;Menu.Item as="h3" name="home" header&gt;
          &lt;a href='/'&gt; HOME &lt;/a&gt;
        &lt;/Menu.Item&gt;
  
        &lt;Menu.Item as="h3" name="trade" header&gt; TRADE&lt;/Menu.Item&gt;
  
        &lt;Menu.Item as="h3" name="logo" header&gt;
          &lt;a href='/'&gt;
            &lt;Image src={logo} size='tiny' /&gt;
          &lt;/a&gt;
        &lt;/Menu.Item&gt;
  
        &lt;Menu.Item as="h3" name="contacto" header&gt; CONTACTO&lt;/Menu.Item&gt;
        &lt;Menu.Item as="h3" name="online" header&gt; ONLINE&lt;/Menu.Item&gt;
  
      &lt;/Menu&gt;
    &lt;/div&gt;
  );
  
  class MenuScroll extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        Efecto: 'hidden'
      }
  
    }
  
      componentDidMount() {
        window.onscroll = () =&gt; this.handleAnimation();
      }
  
      handleAnimation = () =&gt; {
        if (document.documentElement.scrollTop &gt; 400) {
          this.setState({ Efecto: 'MenuEfecto' });
        }
      };
  
      render() {
        return (
          &lt;MenuScrol EfectoCSS={this.state.Efecto}&gt;&lt;/MenuScrol&gt;
        )
      }
    }
    export default MenuScroll;
  </code></pre>
  
  <p><strong>App.css</strong></p>
  
  <pre><code>
  .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;
    }
  }
  </code></pre>