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

Question

内联样式不生效怎么解决
<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 不生效
}

Answer 1

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

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

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

Answer 2

亲测有效 把: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',
        }" 
        />

Answer 3

逗号改成；试试

Answer 4

css命令终止以 “；”结尾

Answer 5

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

Answer 6

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

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

最终效果：

如有疑问可私信我

Answer 7

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

:style="{
          display: 'inline-block',
          width: '45%',
          position: 'absolute',
          textAlign: 'center'}"

Answer 8

<el-input
         :input-style="{'font-size': documentJson.title.font_size + 'px';           这行有效
          'font-weight':'bolder';       这行无效，怎么才能让它有效？？
          'letter-spacing': '2px';       这行无效 怎么才能让它有效？？
}" 

></el-input>

文档：

Answer 9

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