elementuiデフォルトのスタイルを変更するには、いくつかの方法があります

elementui問題のデフォルトのスタイルを変更します

我々はVUEでサードパーティコンポーネントライブラリを導入すると、VUEスタイルは、スコープのコンポーネント私たちの修正は、スタイルを変更するには3つの方法があり、スタイルを妨げ、そして全体的なスタイルは影響しないようになります。
スタイルの外に新しいスタイルを追加するには1をスコープを追加しないでください

<style>
    .my{
        margin: 20px;
    }
    .my .el-input__inner{
        border-radius: 15px;/* 这个样式起效果 */
    }
</style>
<style scoped>
    .my .el-input__inner{
        border-radius: 30px; /* 这个样式不起效果 */
    }
</style>

2使用深く浸透スタイル

<style scoped>
    .my .el-input__inner{
        border-radius: 30px;/* 这个不起作用 */
    }
    .my /deep/ .el-input__inner{
        border-radius: 30px;/* 这个起作用 */
    }
</style>

3使用>>>浸透

<style scoped>
    .my .el-input__inner{
        border-radius: 30px;/* 这个不起作用 */
    }
    .my >>> .el-input__inner{
        border-radius: 30px;/* 这些起作用 */
        border: 1px solid #eceef2;
        outline: 0;
    }
</style>

4いくつかのスタイルのインラインスタイルは、あなたが上記の方法を使用する必要があり、比較的高い重量はスタイルとは体重を増やすことに！重要な追加することを確実にするために変更することができています

<el-input v-model="input" placeholder="请输入内容" style="width: 300px;"></el-input>
<style scoped>
    .my >>> .el-input__inner{
        border-radius: 30px;
        border: 1px solid #eceef2;
        outline: 0;
        width: 400px!important;
    }
</style>

このような入力ボックスの400ピクセル幅があります