Why if i modify in one css file the table will be changed in all places?

Question

I have 2 different pages and 2 different css (one for each html page) and if i modify .table{} in one of them, the css is applied on all pages. I use react bootstrap

I expect to have one table from page1 at 100% width and the table from page2 at 33.3% width.

page2:

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

page1:

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;

at Home.css i have

 .table{
        width: 100%;
    }

at Doctor.css i have

 .table{
        width: 33.3%;
    }

but in Home page the table is 33.3%

i used className={"tableCustom"} for page 2 is ok but i still don't understand why i can't like i did it before — Bogdan Rogojan
– Bogdan Rogojan, Commented Apr 19, 2019 at 18:43
Let's clarify what "pages" means here. SPA views or actually different web pages? — isherwood
– isherwood, Commented Apr 19, 2019 at 18:44
i don't use a class or id for them i just let's them simple like <Table> </Table> at all pages — Bogdan Rogojan
– Bogdan Rogojan, Commented Apr 19, 2019 at 18:44

isherwood · Accepted Answer · 2019-04-19 18:42:45Z

3

React doesn't compartmentalize CSS like Angular does. Once it's loaded in the browser it applies everywhere in the current page. Use additional classes on your tables to specify width.

Better yet, use the grid that Bootstrap provides (.col-xs-4 for 33%).

answered Apr 19, 2019 at 18:42

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lakerskill · Accepted Answer · 2019-04-19 18:44:41Z

0

The order of your import statements will decide on which css file will be used last. However, in your case you should just simply add another marker that points to the change. For instance, in this you have a table className. Add another piece to it like so.

.table{
        width: 100%;
        border: 1px solid black
    }
.home{
       width: 33.3%
}

Then, in your JSX you can do this.

<Table className='table home' />

Now your table will have the border, and also the home width. This is the easiest way to modify existing css.

answered Apr 19, 2019 at 18:44

lakerskill

1,0892 gold badges11 silver badges25 bronze badges

Comments

Bronathan · Accepted Answer · 2019-04-19 18:59:40Z

That is the normal behaviour. You have two classes with the same name, which means after React is finished building your dev, or prod environment the second class will overwrite the first one, because that is what CSS does.

There is a view different options for you to make sure that doesn't happen:

define inline styles
use CSS-in-js like this or with libraries like styled-components
define separate css class names (for this i would recommend a naming convention, this can be your own, your companies naming convention, or something like BEM)

Personally i would go for the naming convention BEM. This could look like the following:

.home__table {
    width: 100%;
}

.doctor__table {
    width: 33%;
}

But since you are using Bootstrap, you might want to use the inline-style option and use the bootstrap provided col sizes like @isherwood suggested.

Collectives™ on Stack Overflow

Why if i modify in one css file the table will be changed in all places?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related