1

私は、strapi を使用してプロジェクトをカスタマイズする必要があるグラフィック デザイナーです。これまでのところ、背景色、背景画像を変更できました-問題ありません。BUT: プライマリ ボタンなどの要素をカスタマイズすることはまったくできません。

多くのクラス定義「.primary」を見つけ、それらを変更しました-結果はありません...最終的にそれらをすべて削除しました...しかし、プライマリボタンは同じように見えます。どのように？なんで？

プライマリ ボタンの外観を削除する唯一の理由は、ボタン宣言の「プライマリ」を削除することでした (例: ログイン ページ -> admin/src/containers/AuthPage の下の index.js 内)。

<Button primary label="users-permissions.Auth.form.button.login" type="submit" />

しかし、それは私が望んでいたことではありません。主なボタンなどをカスタマイズしたい。それを取り除くことはありません。

ストラップのカスタマイズや UI の問題についてスタックオーバーフローを検索しましたが、解決策が見つかりませんでした。ブートストラップ CSS をオーバーライドする多くの戦略を見つけました。たとえば、 ブートストラップ CSS スタイルをオーバーライドするにはどうすればよいですか?

しかし、strapis SCSS は明らかにまだ理解していない何か違うようです。

誰かがアイデアを持っているか、すでにプライマリボタンなどをオーバーライドしている場合は、お知らせください。

前もってありがとう、ステフ。

4

1 に答える 1

2

ボタンのデフォルト スタイルをオーバーライドするには、2 つの方法があります。

  1. styleプロパティをコンポーネントに渡すことができます

    <Button label="Label" type="button" style={{ background: 'red' }} />

  2. カスタムclassNamepropを渡すことができます。

そのためには、「plugins/users-permissions/admin/src/containers/Auth/styles.scss」ファイル (コンポーネントが使用される場所) にク​​ラスを追加する必要があります。

.customButton {
  background: red;
}

次に、index.jsファイルに

import Button from 'components/Button';
import styles from './styles.scss';

render() {
  return (
    <Button label="label" className={styles.customButton} />
  );
}
于 2018-09-18T18:11:21.410 に答える