title: ReactJS Reusable component styling
body: <p>I have reusable component. This component has 2 buttons. on one page both of buttons are being displayed but on the second page I want to display only one,</p>
  <p>Any suggestions please? I tried to pass style as a props but it did not work</p>
  <p>I mean this :</p>
  <pre><code>    const MoneyManagementOffers = ({text,title,style}) =&gt; { 
     return &lt;Button style={style} border=&quot;none&quot; margin=&quot;58.75px auto;&quot; primary width=&quot;134px;&quot;&gt;
              Learn More
            &lt;/Button&gt; 
  </code></pre>
  <p>This just a part from my code.This is the button I want to hide on the second page.</p>
  <p>This is how I tried to use that style prop when I called this component in another place :</p>
  <pre><code>      &lt;MoneyManagementOffers style={display:&quot;none;&quot;} text={&quot;Get Started&quot;}/&gt;
  </code></pre>
  <p>This did not work. Any suggestion on how to fix this?</p>
  <p>I'm using styled-components</p>