Element uiのinputフォームのstyle変更ができない

Question

前提・実現したいこと

nuxt.jsでElementUIのinputフォームの色を変更したいです。

該当のソースコード

<template>
  <div>
    <p class="label">ああああ</p>
    <el-input
      :type="type"
      class="input-form"
      :placeholder="placeholder"
      :style="styleObject"
    ></el-input>
  </div>
</template>

<style scoped>
.label {
  font-size: 12px;
  color: #77828f;
  margin-bottom: 8px;
}

.input-form .el-input__inner {
  border-radius: 16px;
  background-color: red;
}

試したこと

styleを input { }で記載したり
.input-form{ }で記載したりなどパターンを試しましたが変わりません

Answer 1

scoped CSSだからと思われます。このリンクの方法を試してみてください。

環境によってどの記法が使えるかは変わってくるのですが、可能な場合は::v-deepを用いることをお勧めします（他の2つは古い記法のため）。

Comments

[koyo]

ありがとうございます！