2017-07-10 5 views
1

Ich entdecke ReactJS, versuche ein paar Sachen, aber ich habe ein Problem: meine Körpergröße ist auf 76px festgelegt und ich kann nichts dagegen tun, ich habe viel probiert, nichts hat funktioniert. Hier ist der Code iKörpergröße kann nicht geändert werden reactJS

import * as React from 'react'; 

// This fonction make the color change on the button on the first click 
function ChangeStyle() { 
     var elem = document.getElementById('Button1'); 
     if (elem == null) { 
     return; 
     } 
     elem.style.background = '#ff4848'; 

} 

// Main Class 
export class Button extends React.Component { 
    render() { 

     // Style sheet of the Button 
     var buttonStyle = { 
      fontSize: 50, 
      background: '#ffb516', 
      color : '#FFFFFF', 
      width: 500, 
      border: 'none', 
      textAlign: 'center', 
      display: 'block', 
      margin: 'auto' 
     }; 

     // Set the Background color 
     document.body.style.backgroundColor = '#25353f'; 
     document.body.style.position = 'relative'; 
     document.body.style.height = '100%'; 

     // Try to make the button in center 
     /* 
      var centerDiv = { 
       position: 'absolute' as 'absolute', 
       top: '50%', 
       left: '30%', 
       margin: 'auto'  
      } 
     */ 

     // Test on linearGradient 
     /* 
      function degraded() { 
       <svg width='15' height='71' fill='url(#Gradient-1)'> 
        <defs> 
         <linearGradient id='Gradient-1' x2='0%' y2='100%'> 
         <stop offset='0%' stop-color='#25353f'/> 
         <stop offset='100%' stop-color='#5b6c72'/>  
         </linearGradient> 
        </defs> 
       </svg> 
      } 
     */ 

     // Create the button 
     return ( 
      <div id="fullHeight" style={{height: '100%'}}> 
       <div /*style={centerDiv}*/>   
         <button 
          id="Button1" 
          style={buttonStyle} 
          onClick={() => ChangeStyle()} 
         > 
          Pushtalents 
         </button> 
       </div> 
      </div> 
     ); 

    } 
} 

export default Button; 

warum Jede Idee bin mit? Und wie behebt man dieses Problem?

+0

Vergiss nicht den Kommentar, vergessen, meinen Versuch für einen Hintergrund mit Farbverlauf zu löschen ... –

+0

müssen Sie möglicherweise 'html {Höhe: 100%}' –

+0

Ich habe bereits versucht, funktioniert nicht; ( –

Antwort

0

Vielleicht hilft es, wenn Sie position: relative; aus Körper entfernen. Es tut sowieso nichts. Ansonsten können Sie versuchen, die Körpergröße auf 100vh einzustellen.

+0

Die 100vh hat gut funktioniert, danke! –

Verwandte Themen