使用 Vue.js 和 Element-UI 的嵌套 CSS 目标

Question

我有一些嵌套的元素，我需要在一个使用Vue.js和Element-UI的项目中应用样式。

<div slot="left">
<ul class="other">
<li class="disabledText">
<el-input v-model="data.other" type="textarea" :autosize="{ minRows: 4}" :maxlength="3999" :disabled="disSendButton" @change="updateSite('other', data.other)" @blur="data.other=$event.target.value.trim()" />
</li>
</ul>
</div>

在本例中，我将动态应用类"disabledText"到li元素为嵌套文本区域中的文本上色，但是我无法使disabledText类中的规则应用于文本区域。

我尝试过的CSS:

.disabledText textarea{
color:red !important;
{
li.disabledText textarea{
color:red !important;
{
ul.other li.disabledText textarea{
color:red !important;
{

即使直接将类名应用于textarea元素并在CSS类中引用它也没有任何效果。

渲染后的HTML看起来像这样:HTML

Answer 1

也许这样可以:

.disabledText .el-textarea或.disabledText .el-textarea .el-textarea__inner

尽管在没有繁殖的情况下解决这个问题有点困难。你能在CodeSandbox中提供一个例子吗?