カスタムCSSファイルでreact-bootstrapをオーバーライドする

ユーザーインターフェースはアプリの重要な部分であり、エンドユーザーがさまざまなページや機能を操作し始めたときの第一印象に影響を与えます。一般に、現像剤が反応してなど、様々なUIフレームワークを使用しmaterial-ui、reactstrapおよびreact-bootstrap複数のコンポーネントを設計します。それでも、それらのコンポーネントのスタイルを変更する必要がある可能性があります。

react-bootstrapUIコンポーネントのセットが含まれており、既存のスタイルシートを変更するための使いやすさが向上しています。このガイドではreact-bootstrap、カスタムCSSスタイルを要素に適用してコンポーネントCSSをオーバーライドする方法を学習します。

`react-bootstrap`テーブルCSSをオーバーライドする

テーブルコンポーネント/要素は、ユーザーがレコードのリストを表示し、レコードを編集、ページ付け、検索できるほとんどのアプリで使用される主要な要素の1つです。table要素には、シンプル、ストライプ、拡張可能、編集可能、境界線付き、レスポンシブなどのさまざまなバリエーションがあります。

ではreact-bootstrap、table要素は、カスタムCSSクラスを使用してオーバーライドすることができますが、テーブルを使用する前に、あなたはそれをインポートする必要があります。

import { Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

テーブル要素とブートストラップCSSをインポートした後、基本テーブルを作成します。

render() {
    return (
      <>
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Email</th>
              <th>Contact</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>TEST 123</td>
              <td>test@test123.com</td>
              <td>1122334455</td>
            </tr>
            <tr>
              <td>2</td>
              <td>TEST 456</td>
              <td>test@test456.com</td>
              <td>6677889910</td>
            </tr>
            <tr>
              <td>3</td>
              <td>TEST 789</td>
              <td>test@test789.com</td>
              <td>6677889911</td>
            </tr>
          </tbody>
        </Table>
      </>
    );
}

上記のrender()関数では、<Table>要素は行と列の組み合わせとともにヘッダーと本文のセクションを使用します。

たとえば、テーブルの境界線を変更する場合は、以下のCSSクラスを作成します。
 

.table-bordered {
  border: 5px double orange !important;
}

table-bordered はブートストラップに実装されたテーブルの公式クラスですが、それをオーバーライドする場合は、カスタム値とともに同じ名前のカスタムCSSを定義する必要があります。

例を実行すると、定義されたカスタムスタイルに従って、テーブルの境界線がオレンジ色に変更されていることがわかります。次に、行のホバーの色を変更できます。

.table-hover tbody tr:hover {
    color: yellow !important;
    background-color: brown;
}

上記のスタイルを適用すると、更新された色の組み合わせで行にカーソルを合わせます。

以下は、テーブル実装の完全なコードです。
 

import React, { Component } from "react";
import { Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export class Example1 extends Component {
  render() {
    return (
      <>
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Email</th>
              <th>Contact</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>TEST 123</td>
              <td>test@test123.com</td>
              <td>1122334455</td>
            </tr>
            <tr>
              <td>2</td>
              <td>TEST 456</td>
              <td>test@test456.com</td>
              <td>6677889910</td>
            </tr>
            <tr>
              <td>3</td>
              <td>TEST 789</td>
              <td>test@test789.com</td>
              <td>6677889911</td>
            </tr>
          </tbody>
        </Table>
      </>
    );
  }
}

export default Example1;

すべてのカスタムCSSを追加すると、カスタムスタイルが適用され、以前のCSSの動作がまったく異なることがわかります。

ボタンなどの `react-bootstrap`フォームコントロールをオーバーライドする

<Table>既存のCSSがカスタムスタイルで更新される要素の例を見てきました。同様に、任意の形式のコントロールをオーバーライドできます。

フォームコントロールには、入力、ボタン、ドロップダウン、ラジオボタン、チェックボックス、ファイルのアップロードなど、さまざまな入力要素を含めることができます。

<Button>要素のCSSを変更する1つの例が表示されます。

react-bootstrap以下に示すように、からボタンコントロールをインポートします。

import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

ボタンコンポーネントをrender()プライマリバリアントとして関数に使用します。

render() {
    return (
      <>
        <Button variant="primary">
          Primary
        </Button>
      </>
    );
}

variant小道具の値はとしてあるため、ボタンの色は原色で表示されprimaryますが、顧客の要件に応じて色を変更する必要があります。

以下に示すように、カスタムクラスと関連するCSSを作成できます。

.custom-btn {
  background-color: blueviolet !important;
  border: #fff !important;
}

上記のカスタムクラスでわかるように、ボタンの背景色とその境界線が定義されています。ただし、これらのカスタムCSSを適用する場合は、className以下に示すように小道具を使用できます。

render() {
    return (
      <>
        <Button variant="primary" className="custom-btn">
          Primary
        </Button>
      </>
    );
}

以下は、<Button>カスタムCSSスタイルを使用する要素とともに追加された追加の小道具の完全な例です。

import React, { Component } from "react";
import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export class Example2 extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <>
        <Button variant="primary" className="custom-btn">
          Primary
        </Button>
      </>
    );
  }
}

export default Example2;

上記の例を実行すると、カスタムCSSスタイルが既存の色の組み合わせを置き換えてclassName、要素の小道具を使用して現在のスタイルとクラスをオーバーライドしていることがわかります。

結論

すべてのUIフレームワークには、再設計できる必要があるコンポーネント、または既存のCSSスタイルをオーバーライドする機能を持つコンポーネントが含まれています。これらのスキルはにも適用されreact-bootstrap、現在のスタイルをある程度変更する機能を提供します。

プロジェクトの要件に基づいてコンポーネントを変更する必要がある場合があるため、CSSをオーバーライドすると常に便利です。
 

リンク: https://www.pluralsight.com/guides/override-react-bootstrap-with-custom-css-file

#css #reactjs 

 

 

What is GEEK

Buddha Community

カスタムCSSファイルでreact-bootstrapをオーバーライドする

ユーザーインターフェースはアプリの重要な部分であり、エンドユーザーがさまざまなページや機能を操作し始めたときの第一印象に影響を与えます。一般に、現像剤が反応してなど、様々なUIフレームワークを使用しmaterial-ui、reactstrapおよびreact-bootstrap複数のコンポーネントを設計します。それでも、それらのコンポーネントのスタイルを変更する必要がある可能性があります。

react-bootstrapUIコンポーネントのセットが含まれており、既存のスタイルシートを変更するための使いやすさが向上しています。このガイドではreact-bootstrap、カスタムCSSスタイルを要素に適用してコンポーネントCSSをオーバーライドする方法を学習します。

`react-bootstrap`テーブルCSSをオーバーライドする

テーブルコンポーネント/要素は、ユーザーがレコードのリストを表示し、レコードを編集、ページ付け、検索できるほとんどのアプリで使用される主要な要素の1つです。table要素には、シンプル、ストライプ、拡張可能、編集可能、境界線付き、レスポンシブなどのさまざまなバリエーションがあります。

ではreact-bootstrap、table要素は、カスタムCSSクラスを使用してオーバーライドすることができますが、テーブルを使用する前に、あなたはそれをインポートする必要があります。

import { Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

テーブル要素とブートストラップCSSをインポートした後、基本テーブルを作成します。

render() {
    return (
      <>
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Email</th>
              <th>Contact</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>TEST 123</td>
              <td>test@test123.com</td>
              <td>1122334455</td>
            </tr>
            <tr>
              <td>2</td>
              <td>TEST 456</td>
              <td>test@test456.com</td>
              <td>6677889910</td>
            </tr>
            <tr>
              <td>3</td>
              <td>TEST 789</td>
              <td>test@test789.com</td>
              <td>6677889911</td>
            </tr>
          </tbody>
        </Table>
      </>
    );
}

上記のrender()関数では、<Table>要素は行と列の組み合わせとともにヘッダーと本文のセクションを使用します。

たとえば、テーブルの境界線を変更する場合は、以下のCSSクラスを作成します。
 

.table-bordered {
  border: 5px double orange !important;
}

table-bordered はブートストラップに実装されたテーブルの公式クラスですが、それをオーバーライドする場合は、カスタム値とともに同じ名前のカスタムCSSを定義する必要があります。

例を実行すると、定義されたカスタムスタイルに従って、テーブルの境界線がオレンジ色に変更されていることがわかります。次に、行のホバーの色を変更できます。

.table-hover tbody tr:hover {
    color: yellow !important;
    background-color: brown;
}

上記のスタイルを適用すると、更新された色の組み合わせで行にカーソルを合わせます。

以下は、テーブル実装の完全なコードです。
 

import React, { Component } from "react";
import { Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export class Example1 extends Component {
  render() {
    return (
      <>
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Email</th>
              <th>Contact</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>TEST 123</td>
              <td>test@test123.com</td>
              <td>1122334455</td>
            </tr>
            <tr>
              <td>2</td>
              <td>TEST 456</td>
              <td>test@test456.com</td>
              <td>6677889910</td>
            </tr>
            <tr>
              <td>3</td>
              <td>TEST 789</td>
              <td>test@test789.com</td>
              <td>6677889911</td>
            </tr>
          </tbody>
        </Table>
      </>
    );
  }
}

export default Example1;

すべてのカスタムCSSを追加すると、カスタムスタイルが適用され、以前のCSSの動作がまったく異なることがわかります。

ボタンなどの `react-bootstrap`フォームコントロールをオーバーライドする

<Table>既存のCSSがカスタムスタイルで更新される要素の例を見てきました。同様に、任意の形式のコントロールをオーバーライドできます。

フォームコントロールには、入力、ボタン、ドロップダウン、ラジオボタン、チェックボックス、ファイルのアップロードなど、さまざまな入力要素を含めることができます。

<Button>要素のCSSを変更する1つの例が表示されます。

react-bootstrap以下に示すように、からボタンコントロールをインポートします。

import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

ボタンコンポーネントをrender()プライマリバリアントとして関数に使用します。

render() {
    return (
      <>
        <Button variant="primary">
          Primary
        </Button>
      </>
    );
}

variant小道具の値はとしてあるため、ボタンの色は原色で表示されprimaryますが、顧客の要件に応じて色を変更する必要があります。

以下に示すように、カスタムクラスと関連するCSSを作成できます。

.custom-btn {
  background-color: blueviolet !important;
  border: #fff !important;
}

上記のカスタムクラスでわかるように、ボタンの背景色とその境界線が定義されています。ただし、これらのカスタムCSSを適用する場合は、className以下に示すように小道具を使用できます。

render() {
    return (
      <>
        <Button variant="primary" className="custom-btn">
          Primary
        </Button>
      </>
    );
}

以下は、<Button>カスタムCSSスタイルを使用する要素とともに追加された追加の小道具の完全な例です。

import React, { Component } from "react";
import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export class Example2 extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <>
        <Button variant="primary" className="custom-btn">
          Primary
        </Button>
      </>
    );
  }
}

export default Example2;

上記の例を実行すると、カスタムCSSスタイルが既存の色の組み合わせを置き換えてclassName、要素の小道具を使用して現在のスタイルとクラスをオーバーライドしていることがわかります。

結論

すべてのUIフレームワークには、再設計できる必要があるコンポーネント、または既存のCSSスタイルをオーバーライドする機能を持つコンポーネントが含まれています。これらのスキルはにも適用されreact-bootstrap、現在のスタイルをある程度変更する機能を提供します。

プロジェクトの要件に基づいてコンポーネントを変更する必要がある場合があるため、CSSをオーバーライドすると常に便利です。
 

リンク: https://www.pluralsight.com/guides/override-react-bootstrap-with-custom-css-file

#css #reactjs