ElementUI 기본 스타일을 수정하는 몇 가지 방법(소결)

ElementUI는 ui 구성 요소 라이브러리로 현재 최신 버전react와 vue 등 주류 프레임워크를 지원합니다.이 라이브러리의 기본 테마색은 하늘색입니다. 프로젝트 개발에 사용할 경우 기본 스타일을 수정해야 하는 상황이 발생할 수 있습니다. 본고는react와 vue 프레임워크를 바탕으로 몇 가지 ElementUI 기본 스타일을 수정하는 방법을 소개합니다.
ElementUI 다운로드 홈페이지:http://element.eleme.io/#/zh-CN
Vue
설치:

npm i element-ui -S

사용:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
 el: '#app',
 render: h => h(App)
});

(1) 내장 스타일 수정
:style 수정을 통해 로컬 어셈블리 블록에 사용:

<el-button :style="selfstyle"> </el-button>
<script>
 export default {
 data() {
  return {
  selfstyle: {
   color: "white",
   marginTop: "10px",
   width: "100px",
   backgroundColor: "cadetblue"
  }
  };
 }
 }
</script>

(2): class 참조 수정 스타일
:class 수정을 통해 로컬 어셈블리 블록에 사용:

<el-button :class="[selfbutton]"> </el-button>
<script>
 export default {
 data() {
  return {
  selfbutton: "self-button"
  };
 }
 }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
 .self-button {
 color: white;
 margin-top: 10px;
 width: 100px;
 background-Color: cadetblue;
 }
</style>

(3) import 가져오기 수정 스타일
import를 통해 스타일 파일을 가져옵니다. 만약main에 있다면.js에서 css를 가져오면 전역 인용을 표시합니다.로컬 어셈블리 블록 또는 글로벌 어셈블리에 사용할 수 있습니다.

<el-button> el-button </el-button>
<el-button :class="[selfbutton]"> </el-button>
<script>
 import './button.css'
 export default {}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped></style>
 
/* button.css */ 
.el-button {
 color: white;
 margin-top: 10px;
 width: 100px;
 background-Color: cadetblue;
}
 
.self-button {
 color: white;
 margin-top: 10px;
 width: 100px;
 background-Color: cadetblue;
}
 
.self-button:hover {
 color: black;
 background-Color: whitesmoke;
}

React
설치:

npm install element-react -S
npm install element-theme-default -S

사용:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'element-react';
 
import 'element-theme-default';
 
ReactDOM.render(<Button type="primary">Hello</Button>, document.getElementById('app'));

(1) 내장 스타일 수정

import { Button } from 'element-react';
 
function app(){
 render() {
 const style = {
  color: "white",
  marginTop: "10px",
  width: "100px",
  backgroundColor: "cadetblue"
 }
 return(
       <div>
       <Button style={style}>Hello</Button>
      </div>
 );
 }
}

(2) 우선 순위 올리기 스타일 수정
스타일 파일을 가져옵니다. className을 통해 스타일을 인용합니다. 스타일 파일에서 사용해야 합니다!import가 우선순위를 높입니다. 그렇지 않으면 무효입니다.

import '../style/button.css'
import { Button } from 'element-react';
 
function App(){
 render() {
 return(
  <div>
              <Button> Button </Button>
      <Button className="self-button">Hello</Button>
   </div>
 );
 }
}
 
/* button.css */
.el-button {
 color: white!important;
 margin-top: 10px!important;
 width: 100px!important;
 background-Color: cadetblue!important;
}
 
.self-button {
 color: white!important;
 margin-top: 10px!important;
 width: 100px!important;
 background-Color: cadetblue!important;
}
 
.self-button:hover {
 color: black!important;
 background-Color: whitesmoke!important;
}

ElementUI의 기본 스타일을 수정하는 몇 가지 방법(소결)에 대한 이 글을 소개합니다. 더 많은 ElementUI의 기본 스타일을 수정하는 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!