Why is one HTML component style affecting the other components?

Question 1

I'm using React and have a page with 2 components:

return (
 <div>
   <NewNavbar />
   <Row />
 </div>

)

The NewNavbar component looks as follows:

const App = () => (
  <Navbar bg="light" expand="lg">
    <Container>
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="me-auto">
          <Nav.Link href="#/questions">Questions</Nav.Link>
          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">
              Another action
            </NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">
              Separated link
            </NavDropdown.Item>
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>
);

export default App;

For some reason, when I return the <NewNavbar>, the <Row> component's styling is also changing. How do I make it so that the NewNavbar styling doesn't affect other components?

Question 2

There can be many reasons for this issue like

Using same className in both the component
using global stylesheet ( eg. index.css ) to style components
Both the components are of the same type

To fix this issue you can give both the component diffrent className, if both comoponents are of the same type use seprate stylesheet or inline styles to style the components diffrently and avoid using global stylesheet to style components

d33kshant · Answer 1 · 2021-11-24T07:20:46

There can be many reasons for this issue like

Using same className in both the component
using global stylesheet ( eg. index.css ) to style components
Both the components are of the same type

To fix this issue you can give both the component diffrent className, if both comoponents are of the same type use seprate stylesheet or inline styles to style the components diffrently and avoid using global stylesheet to style components

Why is one HTML component style affecting the other components?

In other languages

This page is in other languages

Popular in the category