跳到主要内容

样式覆盖

组件库提供两种方式修改 Shadow DOM 内部样式：

  1. CSS 变量: 在组件父级的样式中使用 css变量 覆盖子节点设置的 css 样式；
  2. 外部样式类: 通过扩展类名组合 ::part的方式 修改样式，权重高于 内联样式 ，低于 !important ；

方式一：通过外部样式类​

自定义的高度 

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/@titian-design/h5"></script>
  <style>
    ::part(my-button) {
      height: 300px;
    }
  </style>
</head>
<body>
    <ti-button type="primary" ext-class="my-button">按钮</ti-button>
</body>
</html>

方式二：通过 css 变量​

Titian UI 为部分样式开放了基于 CSS 属性的定制方案。 相较于 使用外部样式类 的方式来说，当前方案支持在页面或应用级别对多个组件的样式做批量修改，以达搭配对主题样式的定制。
当然，也可以用它来修改单个组件的部分样式，具体的使用方法请查阅各个组件相对应的 css 变量部分。

  1. 通过父节点设置 css 变量修改
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/@titian-design/h5"></script>
  <style>
    .main {
      --button-height: 260px;
    }
  </style>
</head>
<body>
  <div class="main">
    <ti-button type="primary">按钮</ti-button>
  </div>
</body>
</html>
  1. 通过组件自身 ext-style 属性修改
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/@titian-design/h5"></script>
</head>
<body>
  <div class="main">
    <ti-button type="primary" ext-style="--button-height: 260px;">按钮</ti-button>
  </div>
</body>
</html>