[Angular] Separating Structural Styles From Theme Styles - Making Components Themeable

weixin_33804582

于 2017-06-11 02:06:00 发布

阅读量55

点赞数

文章标签： javascript ViewUI

本文介绍了一个组件的CSS文件中如何通过导入common.css和default-theme.css来实现不同主题的样式配置。默认主题包含所有默认主题相关的样式，而common.css则定义了适用于多种主题的通用样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

For the component's css file, we can improt two css files:

common.css
default-theme.css

@import "common.css";
@import "au-fa-input-default-theme.css";

In the default theme, it contains all the default theme related style.

:host {
  border-color: lightgrey;
}

:host(.input-focus) {
  border-color: #4D90FE;
  -webkit-box-shadow: 0 0 5px  #4D90FE;
  box-shadow: 0 0 5px  #4D90FE;
}

In the common.css, it contains all the common style for different themes:

/*Common for all input fields*/
.icon {
  width:20px;
  text-align: center;
  padding-left: 5px;
  padding-right: 2px;
  border:none;
  vertical-align: middle;
}

:host {
  border-width:1px;
  border-style: solid;
  padding: 1px 0;
  display: inline-block;
}

:host(.input-focus) {
  outline: none;
}

:host /deep/ input {
  border:none ;
  outline: none;
  height: 100%;
  box-sizing: border-box;
}