Emojione 区域定义的 textarea 没有任何覆盖的 CSS 修复答案

【问题标题】：Emojione Area defined textarea didn't except any overwritten CSS fixEmojione 区域定义的 textarea 没有任何覆盖的 CSS 修复
【发布时间】：2019-12-21 15:30:37
【问题描述】：

我在我的项目中使用最新的 Emojione 区域。我的textarea 是这样的：

<textarea id="emojionearea" style="display:none"></textarea>

我正在使用最新的 jQuery v3.4.1 min 库。我的代码是这样的：

$("#emojionearea").emojioneArea();

但是我的问题出现在这里。我不能再改变textarea 的样式了。即使使用!important 覆盖默认样式，我也尝试了一些CSS，但没有任何反应。我想要以下 CSS：

#emojionearea {
    width: 100vw!important;
    position: fixed!important;
    bottom: 0!important;
}

那么，有什么办法吗？提前致谢。

【问题讨论】：

标签： css emoji emojione

【解决方案1】：

你必须做这样的事情来克服这个问题：

.myCustomCss {
   width: 100vw!important;
   position: fixed!important;
   bottom: 0!important;
}

完成！其余的代码没问题。只需将您的 textarea 更新为：

<textarea class="myCustomCss" id="emojionearea"></textarea>

注意：您不能将 CSS 直接添加到您的 textarea。而是将所有 CSS 嵌套在一个类中，然后在声明其 ID 之前将其添加到 textarea。为什么？这就是继承。

【讨论】：

【解决方案2】：

这不会像那样工作。将您的 textarea 包含在 div 中并更改 div 的属性以更改 textarea 的属性。

$(document).ready(function(){
$("#myTextarea").emojioneArea(
{
pickerPosition  :"bottom"
}
);
});

.myDiv{
width:20rem;
height:10rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.css" rel="stylesheet"/>


<div class="myDiv">
<textarea id="myTextarea">

</textarea>
</div>

【讨论】：

【解决方案3】：

在HTML文件顶部添加样式，并使用自定义类名覆盖emojioneArea plugin的样式

$("#myTextarea").emojioneArea({
  pickerPosition: "bottom",
  filtersPosition: "bottom",
  tonesStyle: "square",
  shortnames: true,
  tones:false,
  search:false,
  placeholder: "Message (optional)",
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.css" rel="stylesheet"/>

<style>
.custom{
   width:500px;
   height:70px;
   background-color: rgb(0, 141, 228, 0.1);
}
</style>

<textarea class="custom" id="myTextarea"></textarea>

【讨论】：