How to set style attribute in react-Front-end Q&A-php.cn

How to set the style attribute in react: 1. Set the inline style through "
"; 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;}}

Copy after login

2. Set percentage (relative data)

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

Copy after login

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

Copy after login

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>

Copy after login

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>

Copy after login

2. Setting the height of the parent

does not work:

If the height setting of the parent

does not work, then the height of the child

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 child

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>

Copy after login

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!

Related labels：

react

source：php.cn

Previous article：What to do if react null error is reported Next article：How to convert timestamp to date in react

Statement of this Website

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