修改element-ui样式。使用id选择器,id选择器样式优先级高于类选择器。
<template>
<el-container class="container">
<el-header class="header">
<el-menu
mode="horizontal"
:default-active="activeIndex"
@select="handleSelect"
id="menu"
>
<el-menu-item v-for="(horMenu, index) in menuHorizontal" :key="index" :index="horMenu.path" id="menuItem">{{ horMenu.name }}</el-menu-item>
</el-menu>
</el-header>
<el-container>
<el-aside width="100px">侧边</el-aside>
<el-container>
<el-main class="main">
<router-view />
</el-main>
<el-footer class="footer">底部</el-footer>
</el-container>
</el-container>
</el-container>
</template>
上面的代码在浏览器进行编译后可以看到,ui和li已引入有类选择器,这时候在添加类选择器修改样式,原有的属性是不会起作用的,因此需要使用id选择器将类选择器中的属性替换掉:
```css
#menuItem{
height: 30px;
line-height: 30px;
font-size: 0.5em;
padding: 0 0.2rem;
}
#menu{
margin-left: 100px;
top: 30px;
}