"; 2. Through "height: 'calc(100 % - 15px)'" to set the percentage; 3. Set the properties by using the function "getWinHeight(200)" in the style."/> "; 2. Through "height: 'calc(100 % - 15px)'" to set the percentage; 3. Set the properties by using the function "getWinHeight(200)" in the style.">

Home >Web Front-end >Front-end Q&A >How to set style attribute in react

How to set style attribute in react

藏色散人
藏色散人Original
2023-01-19 14:49:202952browse

How to set the style attribute in react: 1. Set the inline style through "e3754c9bb53d3105ab9ea988454fc2bf"; 2. Set the percentage through "height: 'calc(100% - 15px)'"; 3. Set the properties by using the function "getWinHeight(200)" in the style.

How to set style attribute in react

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to set the style attribute in react?

Setting style style in React

1. Set inline style:

1. Basic settings:

Use {}, pass in an object {padding: '2px 0 5px 20px', overflowY: 'auto'}

As shown below:

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

2. Set percentage (relative data)

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

3. Set by function:

For example, write a function to calculate the height of the window:

//参数 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;
  }

Then use it in the style:

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

2. Miscellaneous:

1. The table occupies the entire row:

Set the style of the table tag to 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. Setting the height of the parent dc6dce4a544fdca2df29d5ac0ea9906b does not work:

If the height setting of the parent dc6dce4a544fdca2df29d5ac0ea9906b does not work, then the height of the child dc6dce4a544fdca2df29d5ac0ea9906b must also be set, which can be done with the parent < The height of ;div> remains the same.

As shown in the figure below: the height of parent and childdc6dce4a544fdca2df29d5ac0ea9906b is set to getWinHeight(180)

      <div style={{height: getWinHeight(180), border:&#39;2px&#39;}}>
          <SplitScreen
            id="parameterfiles-panel"
            left={
              <div style={{height: getWinHeight(180)}}>
              ..........
              </div>
            }
            right={
              <div style={{ whiteSpace: "nowrap"}}>
                  <div style={{padding: &#39;2px 0 5px 20px&#39;,overflowY: &#39;auto&#39;, width: &#39;calc(100% - 35px)&#39;,height: getWinHeight(180)}}>
                    <div id="jsoneditor" className="jsoneditor-react-container"  />
                  </div>
              </div>
            }
          />
        </div>

Writing so much for the time being, I will think of it later Otherwise, write again.

Recommended learning: "react video tutorial"

The above is the detailed content of How to set style attribute in react. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn