css - 如何在 REACT(包含在 index.js 文件中)中优先选择我的样式表而不是 Bootstrap ？

Question

我试图通过定义我自己的样式表然后将其导入我的 xyz.js 文件(对于某些组件)来覆盖 bootstrap 的某些属性，如下所示:

Xyz.js

import React, {Component} from 'react';
import axios from 'axios';
import qs from 'qs';
import '../css/company.css'
export default class Xyz extends Component{ 
    constructor(props){
        .....
    }
    render(){       
        return( 
            <div className="container" style={{float: "left"}}>

                <table className = "table">
                    <tbody>
                        <tr>
                            <td>{this.props.index + 1}</td>
                            <td>{this.props.company.name}</td>
                            <td>{this.props.company.type}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        )
    }
}

// I am trying to set border-top of <td> to 0px which is set to 1px 
//by default by bootstrap.css but I am not able to do so

xyz.css

td {
    border-top-width: 0px;
    height: 2px;
}

我正在尝试将 'td' 标签的 border-top 设置为 0px ，它被设置为 1px 默认情况下由 bootstrap.css 但我无法这样做。

Answer 1

当有多个可用规则时，CSS 会根据一些不同的标准选择使用哪个规则，您绝对应该谷歌并阅读更多相关信息。但在这种情况下，有两件事可以提供帮助:

1. Specificity:再次希望您自己对此进行更多研究。但基本上向您的 td 添加一个类并设置 td.classname 样式将增加您的规则的特异性，并使其覆盖 Bootstrap 提供的不太具体的类型选择器

2. !important:您可以在规则后加上 !important 以确保它覆盖所有内容。然而，也有很多非常酷的标准，多个 !important 规则基于这些标准得到排序和应用。