Estoy usando React y tengo una página con 2 componentes:
return ( <div> <NewNavbar /> <Row /> </div> )El componente NewNavbar tiene el siguiente aspecto:
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; Por alguna razón, cuando devuelvo <NewNavbar> , el estilo del componente <Row> también cambia. ¿Cómo hago para que el estilo NewNavbar no afecte a otros componentes?
Puede haber muchas razones para este problema, como
Para solucionar este problema, puede dar a ambos componentes un nombre de clase diferente, si ambos componentes son del mismo tipo, use una hoja de estilo separada o estilos en línea para diseñar los componentes de manera diferente y evite usar una hoja de estilo global para diseñar componentes.