Vue の element-ui コンポーネントのデフォルトの CSS スタイルを変更する 4 つの方法

$危険ボタンの色: #F25454;
$プライマリボタンの色:#3d66e4;
$成功ボタンの色:#12A763;


//デフォルトのボタンの色を変更します。el-button--primary{
	背景色: $primary-btn-color;
	境界線の半径: 4px;
	//境界線: 1px 実線 $primary-btn-color;
	フォントサイズ: 16px;
	境界線: 0;
	
}

//危険ボタンの色を変更します。el-button--danger{
	背景色: $danger-btn-color;
	境界線の半径: 4px;
	//境界線: 1px 実線 $danger-btn-color;
	フォントサイズ: 16px;
	境界線: 0;
}

//成功ボタンの色を変更します。el-button--success{
	背景色: $success-btn-color;
	境界線の半径: 4px;
	//境界線: 1px 実線 $success-btn-color;
	フォントサイズ: 16px;
	境界線: 0;
	
}

//デフォルトのボタンの色を変更します。el-button--default{
	フォントサイズ: 16px;
	境界線の半径: 4px;
}


//成功ボタンの色を変更します。el-button--warning{
	//背景色: $success-btn-color;
	境界線の半径: 4px;
	//境界線: 1px 実線 $success-btn-color;
	フォントサイズ: 16px;
	境界線: 0;
	
}


//ページングを変更する color.el-pagination{
	位置: 絶対;
	表示: インラインブロック;
	マージン: 0 自動;
	残り:50%;
	変換: translateX(-50%);
	背景色: #fafafa;
	境界線: 実線 1px #dfe8eb;
	パディング: 0 !重要;
	.el-pager{
		マージン: 0 !重要;
		。番号{
			色: #3d66e4 !重要;
			左境界線: 1px 実線 #dfe8eb;
			右境界線: 1px 実線 #dfe8eb;
			背景色: #fafafa !重要;
			＆。アクティブ{
				色: #fff !重要;
				//境界線: 1px 実線 #3d66e4;
				背景色: #3d66e4 !重要;
				境界線: 1px 実線 #3d66e4 !重要;
			}
		}
		
	}
	
}	

.el-pagination.is-background .btn-next、.el-pagination.is-background .btn-prev、.el-pagination.is-background .el-pager li{
	マージン: 0 !重要;
	背景色: #fafafa !重要;
}


//チェックボックスを変更する
.el-チェックボックス__inner{
	  境界線: 1px 実線 #C0C0C0 ;
	  幅: 16px;
	  高さ: 16px;
	  境界線の半径: 0;
}

'./src/styles/element-ui-reset.scss' をインポートします 

<テンプレート>
	<div class="my-class">
            <el-テーブル>
            </el-table>
        </div>
</テンプレート>

<スクリプト>
</スクリプト>

<style scoped="scoped" lang="scss">
</スタイル>

<スタイル>
	
    /* element-ui のテーブル コンポーネントのスタイルを変更します*/

    .my-class__expand-column .cell {
            表示: なし;
    }

    .my-class .el-table tbody tr:hover>td {
            カーソル: ポインタ;
    }


    .my-class .el-form .el-form-item .el-input__inner:focus{
             境界線: 1px 実線 #3D66E4;
       }

   
</スタイル>

<テンプレート>
	<div id="私のクラス">
            <el-テーブル>
            </el-table>
        </div>
</テンプレート>

<スタイル>
	
    /* element-ui のテーブル コンポーネントのスタイルを変更します*/

    #my-class__expand-column.cell {
            表示: なし;
    }

    #my-class .el-table tbody tr:hover>td {
            カーソル: ポインタ;
    }


    #my-class .el-form .el-form-item .el-input__inner:focus{
             境界線: 1px 実線 #3D66E4;
       }

  
</スタイル>

 <テンプレート>
	<div id="私のクラス">
            <el-table :class="my-table">
            </el-table>
        </div>
</テンプレート>

<スタイル>
	
    /* element-ui のテーブル コンポーネントのスタイルを変更します*/

    #my-class__expand-column.cell {
            表示: なし;
    }

    #my-class .el-table tbody tr:hover>td {
            カーソル: ポインタ;
    }


    #my-class .el-form .el-form-item .el-input__inner:focus{
             境界線: 1px 実線 #3D66E4;
       }

    #私のクラス.私のテーブル{
    
    }

</スタイル>

	<el-backtop target="" :bottom="100" >
	  <div:スタイル="{
             高さ: 100%;
             幅: _width;
             背景色: #f2f5f6;
             ボックスの影: 0 0 6px rgba(0,0,0, .12);
             テキスト配置: 中央;
             行の高さ: 40px;
             色: #1989fa;
             境界線の半径: 50%;
           }">

                        <i class="el-icon-caret-top"></i>
                </div>
        </el-backtop>
        
        
        データ（） {
           
         戻る {
           _幅: 50%
         }
        }