So legen Sie das Stilattribut in React fest-Front-End-Fragen und Antworten-php.cn

So legen Sie das Stilattribut in React fest: 1. Legen Sie den Inline-Stil über „
“ fest Inline-Stil durch „height: 'calc(100% - 15px)'“, um den Prozentsatz festzulegen. 3. Legen Sie die Eigenschaften fest, indem Sie die Funktion „getWinHeight(200)“ im Stil verwenden.

So legen Sie das Stilattribut in React fest

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie stelle ich das Stilattribut in React ein?

Stil in React festlegen

1. Inline-Stil festlegen:

1. Verwenden Sie {}, übergeben Sie ein Objekt {padding: '2px 0 5px 20px', overflowY: 'auto' }

Wie unten gezeigt:

<div style={{padding: &#39;2px 0 5px 20px&#39;,overflowY: &#39;auto&#39;}}

Nach dem Login kopieren

2. Stellen Sie den Prozentsatz ein (relative Daten)

<div style={{width: &#39;calc(100% - 35px)&#39;,height: &#39;calc(100% - 15px)&#39;}}>

Nach dem Login kopieren

3. Stellen Sie ihn über die Funktion ein:

Schreiben Sie beispielsweise eine Funktion, um die Fensterhöhe selbst zu berechnen:

//参数 adjustValue的作用是在window.innerHeight的基础上，减去多少高度，可以是负值，0，正值
function getWinHeight(adjustValue) {
    let winHeight;
    if (window.innerHeight) {
      winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
      winHeight = document.body.clientHeight;
    }
    return winHeight-adjustValue;
  }

Nach dem Login kopieren

Dann verwenden Sie sie im Stil:

<div style={{width: &#39;calc(100% - 35px)&#39;,height: getWinHeight(200)}}>
    <div id="jsoneditor" className="jsoneditor-react-container"  />
</div>

Nach dem Login kopieren

2. Die Tabelle nimmt die gesamte Zeile ein:

Setzen Sie den Stil des Tabellen-Tags auf style={{width: 'calc(100% - 10px)'}}

<table style={{width: &#39;calc(100% - 10px)&#39;}}>
  <tr>
    <td style={{width:&#39;50px&#39;}}>
      <div style={{paddingTop:"10px",marginLeft:&#39;10px&#39;}}>
        <Button
          id="returnButtonId"
          text=""
          icon={"ic_arrow_back"}
          onClick={doBack}
        />
      </div>
    </td>
    <td>
      <div style={{paddingTop:&#39;10px&#39;}}>Edit Parameter Files</div>
    </td>
    <td>
      <div style={{float:&#39;right&#39;, margin:&#39;0 10px 0 10px&#39;, paddingTop:&#39;10px&#39;}}>
        <Button
            id="`uploadButtonId`"
            text="UPLOAD"
            icon={"ic_arrow_upward"}
            onClick={onUploadClicked}
        />
      </div>
    </td>
  </tr>
</table>

Nach dem Login kopieren

2. Das Festlegen der Höhe des übergeordneten Elements

funktioniert nicht mit der Größe des übergeordneten Elements

übereinstimmen , ich werde mehr schreiben, wenn mir etwas anderes einfällt.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo legen Sie das Stilattribut in React fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

react

Quelle：php.cn

Vorheriger Artikel：Was tun, wenn ein React-Null-Fehler gemeldet wird? Nächster Artikel：So konvertieren Sie den Zeitstempel in React in ein Datum

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors