element plus 没有默认的背景颜色

Question

element plus没有默认的背景颜色

按钮的样式是可以正常显示的，
但像container按官网的代码：

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

不是应该有淡蓝色的背景吗？我这个却没有

main.js:

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
//import 'element-plus/lib/theme-chalk/index.css'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'


const app=createApp(App);
app.use(ElementPlus)
app.mount('#app')

for(const [key,component] of Object.entries(ElementPlusIconsVue)){
    app.component(key,component)
}

```

Answer 1

li_rt4 晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

element plus的容器组件el-container的默认背景颜色是透明的，并没有预设的背景颜色。如果你想要添加背景颜色，可以通过自定义样式来实现。

针对你的代码，你可以在common-layout类中添加背景颜色样式，如下所示：

.common-layout {
  background-color: #e5e5e5; /* 背景颜色 */
}

解决方案：

1. 为容器组件添加背景颜色的样式：

   • 在你的CSS文件中，给.common-layout类添加背景颜色样式。
   • 例如，为了添加淡蓝色的背景颜色，你可以使用background-color: #E6F2FF;。
   • 修改后的CSS代码如下所示：

   .common-layout {
     background-color: #E6F2FF;
   }
   

2. 将修改后的CSS文件引入到vue组件中：

   • 在你的vue组件的style标签中引入修改后的CSS文件。
   • 如果你的CSS文件名为styles.css，则可以使用@import "@/path/to/styles.css";引入。
   • 修改后的vue组件代码如下所示：

   <template>
     <div class="common-layout">
       <el-container>
         <el-header>Header</el-header>
         <el-main>Main</el-main>
       </el-container>
     </div>
   </template>
   
   <script>
   import { createApp } from 'vue'
   import App from './App.vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   
   import "@/path/to/styles.css"; // 引入修改后的CSS文件，替换路径为实际路径
   
   const app=createApp(App);
   app.use(ElementPlus)
   app.mount('#app')
   for(const [key,component] of Object.entries(ElementPlusIconsVue)){
     app.component(key,component)
   }
   </script>
   

通过以上两个步骤，你应该能够成功添加背景颜色到element plus的容器组件el-container中。注意替换CSS文件路径为实际路径。