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?
There can be many reasons for this issue like
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