Develop Reference

How to inherit styles of an element from another file in styled-components

I have a navigation bar on the home page with background-color: white; On moving to another page. I want it to turn black.
My Navigation Styles file:
import styled from 'styled-components'
export const Nav = styled.nav`
background-color: #fff;
`
My Navigation file where I am importing the styles:
import { Link } from 'react-router-dom'
import Nav from './NavStyles'
const NavBar = () => {
return(
<Nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/shop">Shop</Link>
</li>
<li>
<Link to="/cart">Cart</Link>
</li>
</ul>
</Nav>
)
}
export default NavBar
My ShopStyles file (where changing the background-color):
import styled from 'styled-components'
import { Nav } from '../Nav/NavStyles'
const ShopNav = styled(Nav)`
background-color: #323232;
`;
export default ShopNav
My Shop file:
import ShopNav from './ShopStyles'
import { Nav } from '../Nav/NavStyles'
const Shop = () => {
return(
<div>
<Nav>
<ShopNav></ShopNav>
</Nav>
<h1>Over here my shop design will come</h1>
</div>
)
}
export default Shop
App.js:
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './components/Home/Home'
import NavBar from './components/Nav/Nav'
import Shop from './components/Shop/Shop'
const App = () => {
return (
<Router>
<NavBar />
<Switch>
<Route exact path="/"> <Home /> </Route>
<Route exact path='/shop'> <Shop /> </Route>
</Switch>
</Router>
);
}
export default App;
How do I get the color black with my navigation bar?

I don't understand about your worry.
The code which you've written is correct and I have also tested your code.
I recommend that you will check your code again.

Reactjs: Import Sidebar Component to a different page

I have no experience with react, and I'm trying to teach myself by doing/building. I would like to add a sidebar to a page on my site. However, all my research has lead to articles and tutorials that adds the sidebar to the homepage. I don't want it on the homepage, just one page. The look and feel i'm going for is Strip API documentation page:
If i could just get the sidebar on the page, then I can try to style it up the way I like. Below are my files.
component Sidebar.js
import React, { Component } from "react";
import '../Styles/sidebar.css'
class Sidebar extends Component {
render() {
return(
<div className="sidebar">
<h1> I'm the sidebar</h1>
</div>
);
}
}
export default Sidebar;
The page I want to put the sidebar on "Developer.js":
import React from 'react';
import Sidebar from './components/Sidebar'
import './Styles/sidebar.css'
export const Developers = () => (
<div>
<Sidebar />
<h1> Documentation </h1>
<div>
export default Developers;
My take at sidebar.css:
.sidebar-container{
min-height: 100vh;
background-color: lightgray;
}
.sidebar {
width: 200px;
padding-top: 25px;
}
.sidebar-link{
padding: 10px;
}
.sidebar-link:hover{
border-right: 5px solid dimgray;
background-color: gainsboro;
}
app.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home } from './Home';
import { Developers } from './Developers';
import { NoMatch } from './NoMatch';
class App extends Component {
render() {
return (
<React.Fragment>
<NavigationBar />
<Layout>
<Router>
<Switch>
<Route exact path = "/" component={Home} />
<Route path="/developers" component = {Developers} />
<Route component={NoMatch} />
</Switch>
</Router>
</Layout>
</React.Fragment>
);
}
}
export default App;
With the added css file, I'm the sidebar just shows up right above Documentation
It's not in the "sidebar", what am i missing?

Yes, to start with your components are configured incorrectly. It's very easy to fix it. Let's start with the sidebar.js.
//sidebar.js
import React, { Component } from "react";
import './style.css'
export default class Sidebar extends Component {
render() {
return (
<div className="sidebar-container">
<div className="sidebar">
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
</div>
</div>
);
}
}
//Developer.js
import React, { Component } from "react";
import Sidebar from "./Sidebar";
class Developer extends Component {
render() {
return (
<div style={{ display: "flex" }}>
<Sidebar />
<h1>Developer Page</h1>
</div>
);
}
}
export default Developer;
And also, in your App.js file, you are importing as named components. That is the reason why you are not getting the desired output. If you're importing named components you will have to export them the same way too. Currently, you are exporting as them as default, so you don't need the curly braces while importing them.
//App.js
import Home from './Home';
import Developers from './Developer';
import NoMatch from './NoMatch';
Update: Import this file inside your sidebar.js like import ./style.css. I have updated the code for sidebar.js file. Please do check.
//style.css
.sidebar-container{
min-height: 100vh;
background-color: lightgray;
}
.sidebar {
width: 200px;
padding-top: 25px;
display: flex;
flex-direction: column;
}
.sidebar-link{
padding: 10px;
}
.sidebar-link:hover{
border-right: 5px solid dimgray;
background-color: gainsboro;
}

First of all, your Sidebar component can be simplified to a functional component:
// Sidebar.js
import React from "react";
export const Sidebar = () => <div className="sidebar">I'm the sidebar!</div>;
Secondly, in you Developers page, you can remove the Sidebar component because you already have it and you are importing it correctly. Next, add it to your Developers component:
// Developers.js
import React from "react";
import { Sidebar } from "./components/Sidebar";
export const Developers = () => (
<div>
<Sidebar />
<h1> Documentation </h1>
<div>
);
This assumes you have the following folder structure to ensure your imports work correctly:
src/
app.js
Developers.js
components/
Sidebar.js

Navigation Links do not work outside of the App Component

I have 4 files: App.js, navbar.js, signIn.js, signUp.js. I expect the navbar to be displayed at the top of each page that the user navigates. The links in the navbar work on the homepage but the links are disabled on any other page.
I've tried installing react-bootstrap through npm instead of using the cdn but that did not change the issue. I tried creating another group of components called "NavigationLinks.js" but that didn't work either. I'm at a loss as to what else I could do.
Here are the relevant files:
App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './components/layout/navbar'
import Dashboard from './components/feed/dashboard'
import SignIn from './components/auth/signIn'
import SignUp from './components/auth/signUp'
import { BrowserRouter, Switch, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="App">
<Navbar/>
<Switch>
<Route exact path="/" component={Dashboard}/>
<Route path="/signin" component={SignIn}/>
<Route path="/signup" component={SignUp}/>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
Navbar.js
import { Switch, Route, Link} from 'react-router-dom';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
//import './navbar.css';
class navbar extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand as={Link} to='/'>Rekindle</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link as={Link} to="/" >Home</Nav.Link>
</NavItem>
<NavItem eventkey={1} href="/signup">
<Nav.Link as={Link} to="/signup" >Sign Up</Nav.Link>
</NavItem>
<NavItem eventkey={1} href="/signin">
<Nav.Link as={Link} to="/signin" >Login</Nav.Link>
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
{/*this div works for the routing */}
<div>
</div>
</div>
);
}
}
export default navbar;
The code compiles without errors, but I want to be able to navigate back to the homepage from the signIn and signUp routes.

In your code snippet I found some issue, like you missed to import react only.
Any file you create, you need to import react like,
import React from 'react'; //default
Also you are extending Component in your navbar component which is also need to import from react package.
2 ways to extend Component.
Way 1,
import React from 'react';
class navbar extends React.Component{
render(){
return(
<div>...</div>
)
}
}
export default navbar;
Way 2,
import React,{Component} from 'react';
class navbar extends Component{
render(){
return(
<div>...</div>
)
}
}
export default navbar;
You missed this in you navbar component.
Here is the working code snippet for you.

It looks like these integration errors are common and you are suppose to use: https://github.com/react-bootstrap/react-router-bootstrap

Does not load the Navbar component, react-bootstrap

I am starting in React.js and I find this problem when making a navigation menu. It does not generate the menu effect that is expected, here is the code:
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import { Navbar, Nav, NavItem} from 'react-bootstrap';
export class Menu extends Component {
render(){
return (
<Navbar>
<Nav>
<NavItem componentClass= {Link} href="/" to="/" >
Inicio
</NavItem>
<NavItem componentClass= {Link} href="/Pelicula" to="/Pelicula" >
Pelicula
</NavItem>
</Nav>
</Navbar>
);
}
}
export default Menu;
This is the result
It is divided into two components, the top part is the Menu component and the bottom component, Greeting, but the one of my interest is the menu
I hope your help

Ensure you include stylesheets
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
React-bootstrap - Getting Started
Wrap your NavItem in BrowserRouter
import React from 'react';
import React, { Component } from 'react';
import { Link, BrowserRouter } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
export class Menu extends Component {
render() {
return (
<Navbar>
<Nav>
<BrowserRouter>
<NavItem componentClass={Link} href="/" to="/">Inicio</NavItem>
</BrowserRouter>
<BrowserRouter>
<NavItem componentClass={Link} href="/Pelicula" to="/Pelicula">Pelicula</NavItem>
</BrowserRouter>
</Nav>
</Navbar>
);
}
}
export default Menu;
Stackblitz

React js - Why is navbar component not being imported?

It works when I give the part inside app.js but it shows blank screen when it is put in another file navbar.js and imported. If the code in navbar.js is directly added in app.js instead of importing, it works fine and navbar appears. Otherwise blank screen appears.
index.js is shown below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
app.js file
import React, { Component } from 'react';
import navbar from './navbar.js';
class home extends Component {
render() {
return (
<div>
<navbar />
</div>
);
}
}
export default home;
navbar.js file:
import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
class navbar extends Component{
render() {
return (
<Navbar collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default navbar;
Please help, thanks in advance.

You should always start the name of your custom React components with
a uppercase letter.
import React, { Component } from 'react';
import Navbar from './Navbar.js';
class Home extends Component {
render() {
return (
<div>
<Navbar />
</div>
);
}
}
export default Home;
and it's recommended to use the same name for the file name as well. So it should be ./Navbar.js instead of ./navbar.js
Read this page from the official documentation for more information.
Always start component names with a capital letter. For example, <div/> represents a DOM tag, but <Welcome /> represents a component and
requires Welcome to be in scope.