Heim >Web-Frontend >Front-End-Fragen und Antworten >So legen Sie das Stilattribut in React fest

So legen Sie das Stilattribut in React fest

藏色散人
藏色散人Original
2023-01-19 14:49:202951Durchsuche

So legen Sie das Stilattribut in React fest: 1. Legen Sie den Inline-Stil über „e3754c9bb53d3105ab9ea988454fc2bf“ 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;}}

2. Stellen Sie den Prozentsatz ein (relative Daten)

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

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;
  }

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>

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>

2. Das Festlegen der Höhe des übergeordneten Elements dc6dce4a544fdca2df29d5ac0ea9906b funktioniert nicht mit der Größe des übergeordneten Elements dc6dce4a544fdca2df29d5ac0ea9906b ü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!

Stellungnahme:
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