Reactクラスでラップされたボタンはスタイルを採用していません

BrainLikeADullPencil

app.jsxファイルでこのようなボタンをレンダリングすると

<button className="myflatbutton">Click For Fun</button>

次に、app.cssファイルのボタン用に作成したスタイルを採用します。つまり、ボタンは、ブラウザーが提供する醜いデフォルトのボタンではありません。ただし、同じ入力type = buttonをこのようなReactクラスでラップすると

var MyReactButton = React.createClass({
    render: function(){
       return(
         <input type="button" onClick={this.props.onButtonClicked} value={this.props.Title} />
      )
    }
});

app.cssのグローバルボタンスタイルを無視します

button, .button, input[type=submit]{
   color: #fff;
   border-radius: 0px;
   border: none;
  //many more omitted for brevity
}

Reactクラスにラップされたボタンを取得して、reactクラスを適用するたびにそれらのスタイルを書き出すことなく使用する方法はありますか?

ジョセフ・フルロット

さて、CSSは間違っていませんか?フィドルは間違いなくここで役立ちます。

あなたのreactコンポーネントはですがinput type="button"、あなたのcssはinput[type=submit]です。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Reactクラスでラップされたボタンはスタイルを採用していません

分類Dev

カルーセルインジケーターブートストラップ4はCSSスタイルを採用していません

分類Dev

htmlボタンに「active」を追加しても、:activepsuedoクラスに記載されているスタイルは適用されません

分類Dev

resourcedictionaryで宣言されたスタイルはコンボボックスに適用されません

分類Dev

カスタムチェックボックスとラジオボタンにスタイルが適用されていません

分類Dev

ExtJSコンボボックスアイテムにはスタイルが適用されていません

分類Dev

border-radiusスタイルはボタンに直接適用されませんが、特定のクラスを介して機能します

分類Dev

ラムダをダバグしたいのですが、パイプラインスタックによってデプロイされた場合、cdkシンセにはラムダリソースが含まれていません

分類Dev

クラスFilesの新しいBufferedReaderは、指定されたタイプに適用できません

分類Dev

JSONを介して作成されたマーカーは、GoogleマップでクラスタリングされていませんMarkerClusterer

分類Dev

Reactでは、ラベルをクリックしても、入力タイプのチェックボックスのチェック値は変更されません。どうして?

分類Dev

マーケットプレイスを通じてインストールされたすべての(ビルドパイプライン)新しい拡張機能は、「タスクの追加」に表示されません

分類Dev

jenkinsを使用して作成されたiOS9にアプリビルドをインストールできません。エラーは、シンボリックリンクに絶対パスがあることを示しています

分類Dev

ブートストラップモーダルのキャンセルボタンは、入力されたデータをクリアしません

分類Dev

エラー:解放されるポインタがベクトルテンプレートクラスc ++に割り当てられていませんでした

分類Dev

kubernetesダッシュボードエラー: 'メトリッククライアントヘルスチェックに失敗しました:サーバーは要求されたリソースを見つけることができませんでした(サービスヒープスターを取得します)。

分類Dev

ブートストラップは正しくインポートされましたが、スタイルが機能していません

分類Dev

Reactボイラープレート:キャッチされていないRangeError:最大コールスタックサイズを超えました

分類Dev

生成されたタイプのインスタンスを作成できません:このオブジェクトにパラメーターなしのコンストラクターが定義されていません

分類Dev

クラスのインスタンスでiter()を呼び出しても、現在の値の「スナップショット」は作成されませんか?

分類Dev

「キャンセルの確認」ボタンをクリックしても、スライドトグルは変更されません

分類Dev

Javaクラスはデバッグシンボルを使用してコンパイルされましたが、スタックトレースに行番号が表示されませんか?

分類Dev

返されたクラスタイプを介して公開されていない機能を取得するために、返されたインスタンスをダウンキャストすることはお勧めしませんか?

分類Dev

返されたクラスタイプを介して公開されていない機能を取得するために、返されたインスタンスをダウンキャストすることはお勧めしませんか?

分類Dev

Javascriptランタイムエラー:動的に作成されたテキストボックスの未定義またはnull参照のプロパティ「スタイル」を取得できません

分類Dev

リソースを使用してボタンのデフォルトスタイルをオーバーライドしている間、クリックイベントはトリガーされません

分類Dev

サイトがiframeまたはライトボックスで表示されている場合にのみ特定のCSSスタイルを追加します

分類Dev

属性プレフィックスfnは、インポートされたタグライブラリに対応していません

分類Dev

クラスのメソッドは指定されたタイプに適用できません

Related 関連記事

  1. 1

    Reactクラスでラップされたボタンはスタイルを採用していません

  2. 2

    カルーセルインジケーターブートストラップ4はCSSスタイルを採用していません

  3. 3

    htmlボタンに「active」を追加しても、:activepsuedoクラスに記載されているスタイルは適用されません

  4. 4

    resourcedictionaryで宣言されたスタイルはコンボボックスに適用されません

  5. 5

    カスタムチェックボックスとラジオボタンにスタイルが適用されていません

  6. 6

    ExtJSコンボボックスアイテムにはスタイルが適用されていません

  7. 7

    border-radiusスタイルはボタンに直接適用されませんが、特定のクラスを介して機能します

  8. 8

    ラムダをダバグしたいのですが、パイプラインスタックによってデプロイされた場合、cdkシンセにはラムダリソースが含まれていません

  9. 9

    クラスFilesの新しいBufferedReaderは、指定されたタイプに適用できません

  10. 10

    JSONを介して作成されたマーカーは、GoogleマップでクラスタリングされていませんMarkerClusterer

  11. 11

    Reactでは、ラベルをクリックしても、入力タイプのチェックボックスのチェック値は変更されません。どうして?

  12. 12

    マーケットプレイスを通じてインストールされたすべての(ビルドパイプライン)新しい拡張機能は、「タスクの追加」に表示されません

  13. 13

    jenkinsを使用して作成されたiOS9にアプリビルドをインストールできません。エラーは、シンボリックリンクに絶対パスがあることを示しています

  14. 14

    ブートストラップモーダルのキャンセルボタンは、入力されたデータをクリアしません

  15. 15

    エラー:解放されるポインタがベクトルテンプレートクラスc ++に割り当てられていませんでした

  16. 16

    kubernetesダッシュボードエラー: 'メトリッククライアントヘルスチェックに失敗しました:サーバーは要求されたリソースを見つけることができませんでした(サービスヒープスターを取得します)。

  17. 17

    ブートストラップは正しくインポートされましたが、スタイルが機能していません

  18. 18

    Reactボイラープレート:キャッチされていないRangeError:最大コールスタックサイズを超えました

  19. 19

    生成されたタイプのインスタンスを作成できません:このオブジェクトにパラメーターなしのコンストラクターが定義されていません

  20. 20

    クラスのインスタンスでiter()を呼び出しても、現在の値の「スナップショット」は作成されませんか?

  21. 21

    「キャンセルの確認」ボタンをクリックしても、スライドトグルは変更されません

  22. 22

    Javaクラスはデバッグシンボルを使用してコンパイルされましたが、スタックトレースに行番号が表示されませんか?

  23. 23

    返されたクラスタイプを介して公開されていない機能を取得するために、返されたインスタンスをダウンキャストすることはお勧めしませんか?

  24. 24

    返されたクラスタイプを介して公開されていない機能を取得するために、返されたインスタンスをダウンキャストすることはお勧めしませんか?

  25. 25

    Javascriptランタイムエラー:動的に作成されたテキストボックスの未定義またはnull参照のプロパティ「スタイル」を取得できません

  26. 26

    リソースを使用してボタンのデフォルトスタイルをオーバーライドしている間、クリックイベントはトリガーされません

  27. 27

    サイトがiframeまたはライトボックスで表示されている場合にのみ特定のCSSスタイルを追加します

  28. 28

    属性プレフィックスfnは、インポートされたタグライブラリに対応していません

  29. 29

    クラスのメソッドは指定されたタイプに適用できません

ホットタグ

アーカイブ