PatternFly定制

全局CSS变量

  • src/app/app.css 中可以定义全局变量，全局变量用 :root 扩起:

    :root {
  /* Default & hovered link colors */
  --pf-global--link--Color: #06c;
  --pf-global--link--Color--hover: #004080;
}

  • PatternFly: full list of global CSS variables

这里定义的颜色可以用于不同组件，例如 页头 的背景色 page__header ，我在 app.css 中添加如下内容(参考教程案例):

.pf-c-page {
  --pf-global--link--Color: var(--my-app-card-theme--Color);
  --pf-c-page__header--BackgroundColor: var(--pf-global--palette--blue-400);
}

参考