在 phoenix liveview 中设置静态和动态文本区域的样式

Question

我有一个 html.heex 文件，它既有静态文本区域标记，又有动态文本区域，如下所示

<.input type='textarea' />

。当我尝试独立设计它们时，我遇到了问题。我感觉问题与我使用

form textarea

访问 css 中的动态文本区域的方式有关 - 当前的问题是

form textarea

的样式覆盖了

.line-numbers

中的内容，我一生都无法做到我调整动态文本区域的宽度。我将在下面发布图片以便更清楚地了解布局。

但是这是我现在拥有的代码：

html.heex:

<div class="flex">
  <textarea id="line-numbers" class="line-numbers rounded-bl-md" readonly>
     <%= "1\n" %>
  </textarea>
  <.input
    field={@form[:markup_text]}
    type="textarea"
    class="markup-input"
    placeholder="Insert code..."
    spellcheck="false"
    autocomplete="off"
    phx-debounce="blur"
   />
 </div>

css文件：

form textarea {
    @apply bg-emDark-dark font-brand font-regular text-xs border border-white h-[300px] resize-none;
    border-top-left-radius: 0 !important; /*!important seems to be a cheat code when css is misbehaving. doesn't work otherwise*/
    border-top-right-radius: 0 !important;
    color: white !important;
    margin-top: 0 !important;
    width: 300px !important; /*This affects both textareas but I want it to only affect the dynamic textarea*/
}

form textarea {
    @apply focus:outline-none focus:border-white
}

.line-numbers {
    @apply border border-white font-brand font-regular text-xs text-emDark-light bg-emDark-dark h-[300px] w-[54px] text-right overflow-hidden resize-none;
    border-right: none;
    border-top: none;
}

.line-numbers:focus {
    @apply focus:outline-none focus:border-white focus:ring-0;
}

正如你所看到的，我在代码中到处都抛出了一堆

!important

，这并不理想，但由于某种原因，否则什么都不起作用。我只需要知道使用动态文本区域的正确方法以及如何设置它们的样式以防止这种奇怪的做事方式。

第一张图片是我目前拥有的，第二张图片是我正在努力的。

我认为问题的总结是这样的：

样式实际上对动态文本区域产生影响的唯一方法是使用

form textarea

来实现。但问题是，如果我这样做，它就会影响表单中的每个文本区域（甚至是带有 .line-numbers 类的静态文本区域）。我对 css 并不是特别陌生，所以至少可以说我很困惑。这就是为什么我想知道是否有任何教条的凤凰方式来设计动态输入

Answer 1

问题在于您以多种方式声明样式，并且可能失去了对特异性的可见性。

这里很好地解释了特异性以及浏览器如何确定样式的优先级。

但总而言之，你可以将其视为

inline > id > class > type

。

内联样式具有最高优先级。然后是使用 id 选择器应用样式 (

#my-element

)。然后是类和属性选择器 (

.my-class

)。最后，输入选择器 (

form textarea

)。

文章中还有一个关于

!important

的有用部分。基本上，它恢复样式表的级联顺序，从而覆盖其他样式。有人提到这是不好的做法，应该避免。

现在，针对您的具体情况，您要设置：

form textarea {
  width: 300px !important;
}

这会导致该宽度覆盖类设置的宽度，该宽度是使用

@apply w-[54px]

设置的。

作为快速解决方案，您可以将其从

@apply

行中删除，然后添加：

.line-numbers {
  width: 54px !important;
}

Here是一个 JSfiddle，其中包含您的代码，并进行了一些更改。在该小提琴中，仅从

!important

样式中删除了

form textarea

。但是，如果由于某种原因你必须保留它，添加上面的内容，仍然应该解决它。

但是，我鼓励您尝试以正确的方式使用特异性，以避免最终到处使用

!important

。