如何更新 blazor 中浏览器生成的内联样式

Question

问题是这样的 Box 有一个 resize css 属性，允许用户改变它的大小。它更新内联样式 height.
还有一个按钮可以改变同一个框的大小。
在用户不开始同时使用这两个功能之前，这两个功能都可以正常工作。
当用户开始调整框的大小而不是浏览器正在向 div 添加内联样式时，问题就来了，即：style="height:40px" 这种内联样式比来自 css 文件的任何样式都强，因此按钮实际上停止工作如果我将 !important 规则添加到 css 并且浏览器调整大小功能不再起作用，则不能再使用按钮调整框的大小，因为重要的覆盖内联规则。
我尝试使用 reset 重置样式，但如果用户开始使用调整大小，它就不起作用。
所以

如何reset/update用户使用调整大小功能时浏览器生成的样式？

<div class="terminal_in_body terminal_size-@terminalSize" style="@reset">

<button class="terminal_btn @(terminalSize == 0?"button_hidden":"button_visiable")" @onclick="Collaps" title="Extend/Hide terminal" >@(terminalSize == 0?"^":"_")</button>

@code {
  string reset = "";
  int terminalSize = 1; // 0 - collaps, 1 - 10% of screen, 2 - 20% of screen and so one
  public void Collaps()
  {
    reset = "xx";
    terminalSize++;
    if(terminalSize > 4)
      terminalSize = 0;
    InvokeAsync(() => StateHasChanged());
  }
}

使用调整大小功能规则 height 后从浏览器中删除的元素正在覆盖 terminl_size-1 规则，我找不到重置它的方法。

<div class="terminal_in_body terminal_size-1" style="height: 342px;" ></div>

.terminal_in_body {
  background-color:rgb(44, 44, 44);
  border-top: 1px solid #d6d5d5;
  width: inherit;
  transform: rotateX(180deg);
  resize: vertical;
  overflow: auto;
}

}
.terminal_size-0{
  height: 0rem !important;
}
.terminal_size-1{
  height: 4rem;
}
.terminal_size-2{
  height: 8rem;
}
.terminal_size-3{
  height: 16rem;
}
.terminal_size-4{
  height: 32rem;
}

Answer 1

你可以这样做

<div contenteditable="true" 
  class="terminal_in_body" 
  style="height: @(sizes[terminalSize])rem;">
This is my text
</div>

<button class="terminal_btn @(terminalSize == 0?"button_hidden":"button_visiable")" 
  @onclick="Collaps" 
   title="Extend/Hide terminal" >@(terminalSize == 0?"^":"_")
</button>

@code {
  int terminalSize = 1; // 0 - collaps, 1 - 10% of screen, 2 - 20% of screen and so one
  int[] sizes = {0,4,8,16,22};
  public void Collaps()
  {
    terminalSize++;
    if(terminalSize > 4)
      terminalSize = 0;
  }
}

<style>
    .terminal_in_body {
  background-color:rgb(44, 44, 44);
  border-top: 1px solid #d6d5d5;
  width: inherit;
  resize: vertical;
  overflow: auto;
}
</style>

BlazorRepl

如何更新 blazor 中浏览器生成的内联样式

How to update a inline style generated by browser in blazor

blazor

blazor-server-side