使用自定义 CSS 文件覆盖 react-bootstrap

2020-11-18 08:00:00 · 飞浪

介绍用户界面是应用程序的关键部分，当最终用户开始与各种页面或功能交互时，它会影响第一印象。通常，开发人员使用React的各种UI框架（例如material-ui、reactstrap和

介绍

用户界面是应用程序的关键部分，当最终用户开始与各种页面或功能交互时，它会影响第一印象。通常，开发人员使用 React 的各种 UI 框架（例如material-ui、reactstrap和react-bootstrap）来设计多个组件。不过，他们可能需要修改这些组件的样式。

react-bootstrap包含一组 UI 组件，并且具有更好的可用性来修改现有的样式表。在本指南中，您将学习如何通过将自定义 CSS 样式应用于元素来覆盖react-bootstrap组件 CSS。

覆盖 react-bootstrap 表格 CSS

表格组件/元素是大多数应用程序使用的主要元素之一，用户可以在其中查看记录列表并编辑、分页和搜索记录。表格元素有不同的变体，如简单、条纹、可扩展、可编辑、带边框、响应式等。

使用react-bootstrap，可以使用自定义 CSS 类覆盖表元素，但在使用表之前，您需要导入它。

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

导入表格元素和 bootstrap 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>元素使用 header 和 body 部分以及行和列的组合。

例如，如果您想更改表格边框，则创建以下 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 的示例。

从react-bootstrap导入按钮控件，如下所示。

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

使用按钮组件作为主要变体放入render()函数中。

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

按钮颜色将显示主颜色，因为变体道具的值为主颜色，但您需要根据客户要求更改颜色。

您可以创建自定义类和相关 CSS，如下所示。

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

如您在上面的自定义类中看到的，按钮的背景颜色及其边框已定义。但是，如果您想应用这些自定义 CSS，则可以使用下面给出的className属性。

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

下面是与使用自定义 CSS 样式的<Button>元素一起添加的附加道具的完整示例。

      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 总是很方便，因为可能需要根据项目要求修改组件。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用自定义 CSS 文件覆盖 react-bootstrap

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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> </> ); }

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;

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;