- ElementUI 是一套ui組件庫,目前最新版本 react 和 vue 等主流框架都有支持。該庫默認主題色是天藍色,若用於項目開發,難免遇到要需求修改其默認樣式的情況,本文就基於 react 和 vue 框架介紹幾種修改 ElementUI 默認樣式的辦法。
Vue
(一)內嵌法修改樣式
- 通過:style修改,用於局部組件塊:
<el-button :style="selfstyle">默認按鈕</el-button> <script> export default { data() { return { selfstyle: { color: "white", marginTop: "10px", width: "100px", backgroundColor: "cadetblue" } }; } } </script>
(二):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>
(三)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
(一)內嵌法修改樣式
- 內嵌
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> ); } }
(二)提升優先級修改樣式
- 導入樣式文件,通過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; }