css - 为什么如果我在一个 css 文件中修改表格将在所有地方更改？

Question

我有 2 个不同的页面和 2 个不同的 css(每个 html 页面一个)，如果我修改其中一个中的 .table{}，则 css 将应用于所有页面。我使用 react Bootstrap

我希望第 1 页的一个表格宽度为 100%，第 2 页的表格宽度为 33.3%。

第 2 页:

   import React from 'react';
import Container from "react-bootstrap/Container";
import {Jumbotron} from "react-bootstrap";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from "react-bootstrap/Image"
import ProgressBar from "react-bootstrap/ProgressBar"
import Table from "react-bootstrap/Table"
import './Doctor.css'

export default class Doctor extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
    }

    componentDidMount() {

        fetch('http://localhost:8000/api/doctorsList')
            .then(res => res.json())
            .then(json => {
                this.setState({
                    isLoaded: true,
                    items: json,
                })
            });
    }

    render() {
        var { isLoaded, items} = this.state;

        if (!isLoaded){
            return <div>Loading...</div>
        }else {
            return (
                <Container>

                <Jumbotron>
                    <h1 align="center">The Clinicum</h1>
                </Jumbotron>



                    <Row>
                        {items.map(row =>(
                    <Col className={".column"}  key={row.iddoctor}>
                        <Image src={require('./photos/dr1.jpg')} roundedCircle />

                        <p>Raiting:</p>
                        <ProgressBar>
                            <ProgressBar striped variant="success" now={70} key={1} label={"70%"} />
                            <ProgressBar striped variant="danger" now={30} key={2} label={"30%"} />
                        </ProgressBar>

                        <br/>

                        <Table striped bordered hover >
                            <tbody>
                            <tr>
                                <td>Name</td>
                                <td>{row.nume}</td>
                            </tr>
                            <tr>
                                <td>An absolvire</td>
                                <td>{row.anAbsolvire}</td>
                            </tr>
                            <tr>
                                <td>Specializare</td>
                                <td>{row.specializare}</td>
                            </tr>
                            <tr>
                                <td>Telefon</td>
                                <td>{row.photoLink}</td>
                            </tr>
                            </tbody>
                        </Table>

                    </Col>
                        ))}
                </Row>






            </Container>
        )};
    }
}

第 1 页:

import React, {Component} from 'react';
import { Link} from 'react-router-dom';
import {Jumbotron} from 'react-bootstrap';
import './Home.css';
import Container from "react-bootstrap/Container";
import Table from "react-bootstrap/Table";
import {Image} from "react-bootstrap";

class Home extends Component {

    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
    }

    componentDidMount() {

        fetch('http://localhost:8000/api/clinicList')
            .then(res => res.json())
            .then(json => {
                this.setState({
                    isLoaded: true,
                    items: json,
                })
            });
    }

    render() {

        var { isLoaded, items} = this.state;

        if (!isLoaded){
            return <div>Loading...</div>
        }else {

            return (
                <Container>
                    <Jumbotron>
                        <h1 align="center">The Clinicum</h1>
                    </Jumbotron>

                    <Table className="table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Locatie</th>
                            <th>Tip Unitate</th>
                        </tr>
                        </thead>
                        <tbody>

                           {items.map(row =>(
                                        <tr key={row.idclinic}>
                                            <td>
                                                <Link to="/doctor">
                                                <Image
                                                    src= {require(`./photos/${row.photoLink}.jpg`)}//{row.photoLink}
                                                    width="30"
                                                    height="30"
                                                    className="d-inline-block align-top"
                                                    alt={"aa"}
                                                />{row.name}
                                            </Link>
                                            </td>
                                            <td>{row.locatie}</td>
                                            <td>{row.tipUnitate}</td>
                                        </tr>

                                ))}

                        </tbody>
                    </Table>


                </Container>
            );
        }
    }
}

export default Home;

在 Home.css 我有

 .table{
        width: 100%;
    }

在 Doctor.css 我有

 .table{
        width: 33.3%;
    }

但在首页的表格是33.3%

Answer 1

React 不像 Angular 那样将 CSS 分隔开来。一旦它被加载到浏览器中，它就会应用到当前页面的任何地方。在表格上使用其他类来指定宽度。

更好的是，使用 Bootstrap 提供的网格(.col-xs-4 占 33%)。