Vue3 element el-input 内联样式 不生效,怎么让它生效

内联样式不生效怎么解决
<el-input class="titleInput2" type="text" placeholder="标题" 
        v-model="documentJson.title.text"
        :style="{
          'font-size': documentJson.title.font_size + 'px',             这行有效
          'font-weight':'bolder',        这行无效,怎么才能让它有效??
          'letter-spacing': '2px',       这行无效 怎么才能让它有效??
        }" 
        />

外联如下
都有效。但是目的是要写内联,内联才支持 documentJson.title.font_size + 'px' 这种变量。 外联 v-bind的 变量不支 带点号的
.titleInput2 :deep(.el-input__inner){
  letter-spacing: v-bind(letterSpacing);   #v-bind中的变量不支持 documentJson.title.letter_spacing 这种,要通过增加变量来转换,所以想知道内联生效的写法
  font-weight: bolder;
  font-family: '宋体'!important; #这个不加!important 不生效
}

你好 你这个不是不生效,而是被里面input的样式覆盖了 如果想这么写就要把里面的样式初始化 应该可以解决

.el-input__wrapper{
'font-weight':'inherit'; 
'letter-spacing': 'inherit'; 
  
}

.el-input__inner{
'font-weight':'inherit'; 
'letter-spacing': 'inherit'; 
}

亲测有效 把:style改成:input-style

   <el-input class="titleInput2" type="text" placeholder="标题" 
        v-model="documentJson.title.text"
        :input-style="{
          'font-size': documentJson.title.font_size + 'px',
          'font-weight':'bolder',
          'letter-spacing': '2px',
        }" 
        />

img

逗号改成;试试

css命令终止以 “;”结尾

一个是逗号改为分号 而且你直接可以写死 没必要动态style style="
'font-size': documentJson.title.font_size + 'px'; 这行有效
'font-weight':'bolder'; 这行无效,怎么才能让它有效??
'letter-spacing': '2px'; 这行无效 怎么才能让它有效??
"

element 组件 内联样式没有应用在最底层的input ,所以导致你的样式没有生效,但可以通过以下方式得到你想要的效果:


        const input = ref(null);
        const inputTarget = input.value?.ref;
                  inputTarget.style =`font-size: ${20}px;font-weight:bolder;letter-spacing: 12px`;

最终效果:

img


如有疑问可私信我

这样,去掉 - ,下一单词首字母大写

:style="{
          display: 'inline-block',
          width: '45%',
          position: 'absolute',
          textAlign: 'center'}"
<el-input
         :input-style="{'font-size': documentJson.title.font_size + 'px';           这行有效
          'font-weight':'bolder';       这行无效,怎么才能让它有效??
          'letter-spacing': '2px';       这行无效 怎么才能让它有效??
}" 

></el-input>

文档:

img

style属性名称错误,改为input-style https://element-plus.org/zh-CN/component/input.html#input-%E5%B1%9E%E6%80%A7