0

grommet v2 でアプリのテーマを作成しようとしています。グロメットコンポーネントからクレートフォームに Form と FormField を使用しています。FormField がアクティブな場合、下の境界線の色がデフォルトaccent-1に変わり、この境界線の色を変更できません。

コンポーネントのテーマプロパティに入れているtheme.jsファイルがあります。テーマに関連するものはすべてうまく機能します (ボタンの色など)。accent-1 の色を変更しようとしましたが、これに関するドキュメントが不足しています。

theme.jsで

export const theme = {
   global: {
      colors: {
         brand: colors.primary,
         text: colors.white
      },
      focus: {
         border: {
            color: colors.primary
         },
         accent: {
            1: "#EEEEEE"
         },
         borderBottom: colors.primary
      }
   },
}

この色をグレーに変更する予定ですが、まだデフォルトの色です

4

3 に答える 3

2

私もこの問題を抱えていました。というグローバルカラーを追加することで、ある程度解決できましたfocus。FormField コンポーネントの色をカスタマイズできるようには見えません。

これは機能します：

const theme = {
  global: {
    colors: {
      brand: '#0CA7D3',
      grey: '#DDDBE0',
      grey2: '#9A9A9A',
      focus: '#0CA7D3' // added focus color
    }
  },
  formField: {
    label: {
      size: 'small'
    }
  }
}

これはグローバル カラーであるため、他のコンポーネント間でフォーカス カラーが変更される可能性があることに注意してください。

これは動作しません：

const theme = {
  global: {
    colors: {
      brand: '#0CA7D3',
      grey: '#DDDBE0',
      grey2: '#9A9A9A'
    }
  },
  formField: {
    label: {
      size: 'small'
    },
    colors: {
      focus: '#0CA7D3' // tried adding a colors property with a focus property inside of it
    }
  }
}

ソースコード

FormField コンポーネントのソース コードを見ると、borderColor を次のように定義しているように見えます。

let borderColor;
if (focus && !normalizedError) {
  borderColor = 'focus';
} else if (normalizedError) {
  borderColor = (border && border.error.color) || 'status-critical';
} else {
  borderColor = (border && border.color) || 'border';
}

Github のコンポーネント コードへのリンクは次のとおりです: FormField.js

normalizedError のケースborder.error.colorで、Grommet のテーマ オブジェクトのプロパティである which をどのように使用しているかに注意してください。フォーカス ケースでは、borderColor を に設定しfocusます。

コンポーネントは、テーマ オブジェクトから FormField コンポーネントのフォーカス カラーの指定をサポートしていないようです。

于 2019-08-02T05:31:38.160 に答える
0

私はstyled-components'を次のextendように使用しました: 

textInput: {
  extend: `
    background: ${ '#333333' }; // dark-1
    margin: 2px 0px;

    &:hover {
      background: ${ '#555555' }; // dark-2
    }

    &:focus {
      background: ${ '#555555' }; // dark-2
      color: ${ '#ffffff' };
    }

    &::placeholder {
      color: dark-5;
      font-style: italic;
      font-weight: 200;
    }
  `,
},
于 2019-10-21T13:52:28.547 に答える