21

詳細

私は Web 用のマテリアル コンポーネント (MDC) を調べ、CDN (ホストされた CSS および JavaScript ライブラリ) を使用することにしました。

  • https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
  • https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

これは、[ 1 ]の Getting-started-docs-page によるものです。同様に、MDC には、テーマの色を簡単にカスタマイズできるこの前身のスラッシュ ライター ライブラリマテリアル デザイン ライト (MDL) があります。これは、カスタム CSS テーマ ビルダーを使用して行うことができます。[ 2 ]

ただし、MDC Web のテーマ ガイドによると: [ 3 ]

... 現時点では、MDC Web は Sass と CSS カスタム プロパティを使用したテーマ設定をサポートしており、そのサービスが利用可能になったら、CDN のサポートも計画しています。

現在、MDC の CDN URL を介してテーマの色を変更することはできません。

もう一度質問に戻りますが、CDN を使用して新しい MDC for Web でプライマリ カラーとセカンダリ カラーを設定するにはどうすればよいでしょうか?

参考文献

  1. はじめに、Web 用マテリアル コンポーネント
  2. カスタム CSS テーマ ビルダー、Material Design Lite
  3. テーマ ガイド、Web 用マテリアル コンポーネント
4

2 に答える 2

25

CDN から MDC Web の CSS を使用している場合は、次のようにCSS カスタム プロパティ (変数)を使用してテーマを変更できます。

/* my-style.css */

:root {
  --mdc-theme-primary: #fcb8ab;
  --mdc-theme-secondary: #feeae6;
}

MDC テーマの CSS カスタム プロパティの完全なリストは、ここにあります。たとえば、プライマリ/セカンダリ背景の上でテキストの色を変更する方法は次のとおりです。

/* my-style.css */

:root {
  --mdc-theme-primary: #fcb8ab;
  --mdc-theme-secondary: #feeae6;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;
}

この CSS は、MDC Web の CSS ファイルをインポートした後に来る必要があることに注意してください。

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="my-style.css">

あなたが言及した MDL テーマ カスタマイザーは、MDC Web とは何の関係もありません。MDL は MDC Web の前身であり、MDC Web を支持して廃止されました。

于 2018-09-18T12:16:35.100 に答える