this is my css file Header.css
.header{
background-color: lightblue;
text-align: center;
}
My Header.js file
import React from 'react'
import './Header.css'
const Header = () => {
return (
<div className = "header">
<p> hope u enjoyed it here</p>
</div>
);
}
export default Header;
these are The imports in the App.js file
import Recipe from './Recipe';
import Header from './layout/Header';
import Footer from './layout/Footer';
import Nav from './layout/Nav';
I've tried making a Nav Component but for some reason thats not rendering either.
Related
I want to create an expandable side menu which is toggled by clicking the hamburger menu inside "MobileNav". I'm having issues selecting the elements since they're inside seperate documents. How would I go about doing this?
The idea is to add and remove the "hidden" class to hide and show the expanded menu.
App
import React from "react";
import ExpandedNav from "./components/ExpandedNav";
import MobileNav from "./components/MobileNav";
import Navbar from "./components/Navbar";
import "./styles/styles.css";
function App() {
return (
<div className="app-wrapper">
{/* Mobile Nav */}
<MobileNav />
<ExpandedNav />
{/* Main Nav */}
<Navbar />
{/* Routing */}
</div>
);
}
export default App;
Expanded Nav
import React from "react";
function ExpandedNav() {
return <div className="expanded-nav" id="expanded-nav"></div>;
}
export default ExpandedNav;
Mobile Nav
import React from "react";
import { AiOutlineMenu } from "react-icons/ai";
function MobileNav() {
return (
<div className="app-mobile-nav">
<div className="mobile-nav-brand">
<span>Chicken</span>
<div className="mobile-nav-divider" />
<span>Little</span>
</div>
<AiOutlineMenu className="nav-icon" id="mobile-hb-nav" />
</div>
);
}
export default MobileNav;
Expanded Nav SCSS
.expanded-nav {
display: flex;
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: 15px 20px 15px 0px;
width: 300px;
border-radius: $border-radius;
box-shadow: $box-shadow;
border: $thin-light-border;
background-color: $block-color;
}
.hidden {
display: none; /* responds to click event */
}
There is a better way then toggling CSS classes. Add state in the App file and then forward function for changing state via props to the MobileNav component. Based on the state show or hide expanded component. Something like this:
import React from "react";
import ExpandedNav from "./components/ExpandedNav";
import MobileNav from "./components/MobileNav";
import Navbar from "./components/Navbar";
import "./styles/styles.css";
function App() {
const [isVisible, setIsVisible] = useState(false);
return (
<div className="app-wrapper">
{/* Mobile Nav */}
<MobileNav toggleNav={() => setIsVisible(!visible)}/>
{isVisible && <ExpandedNav />}
{/* Main Nav */}
<Navbar />
{/* Routing */}
</div>
);
}
export default App;
import React from "react";
import { AiOutlineMenu } from "react-icons/ai";
function MobileNav({toggleNav}) {
return (
// Add onClick function to the element that you need, this is only
// for example
<div className="app-mobile-nav" onClick={toggleNav}>
<div className="mobile-nav-brand">
<span>Chicken</span>
<div className="mobile-nav-divider" />
<span>Little</span>
</div>
<AiOutlineMenu className="nav-icon" id="mobile-hb-nav" />
</div>
);
}
export default MobileNav;
I'm trying to learn Styled Components - It's great, and everything works awesome, but I can't get an <a> to be styled
This is my styled-component from StyledCSS.js:
...............
export const HeadLink = styled.a`
color: pink,
text-decoration: none,
`;
...............
Here is my react component
import React from 'react';
import {
HeadCon,
HeadLink,
Container,
Branding,
Nav,
UL,
LI,
} from './StyledCSS';
function Header() {
return (
<HeadCon colorBG="#35424a">
<Container>
<Branding>
<h1>Acme Web Design</h1>
</Branding>
<Nav>
<UL>
<LI>
<HeadLink href="index.html">About</HeadLink>
</LI>
<LI>
<HeadLink href="index.html">Contact</HeadLink>
</LI>
<LI>
<HeadLink href="index.html">Weather</HeadLink>
</LI>
</UL>
</Nav>
</Container>
</HeadCon>
);
}
export default Header;
You should be using semi-colons inside the styled object—not commas. Here is a working example.
import React from "react";
import "./styles.css";
import { HeadLink } from "./HeadLink";
export default function App() {
return (
<div className="App">
<HeadLink href="index.html">About</HeadLink>
</div>
);
}
Headlinks.js
import styled from "styled-components";
export const HeadLink = styled.a`
color: pink;
text-decoration: none;
`;
CodeSandbox
This is how I am loading my Font files in reactjs
import styled from 'styled-components';
import fontUrls from './UberMove-Bold.ttf';
import fontUrls1 from './UberMove-Light.ttf';
import fontUrls2 from './UberMove-Medium.ttf';
import fontUrls3 from './UberMove-Regular.ttf';
const Fonts = styled`
#font-face {
font-familty: 'UberMove-Light';
src: url(${fontUrls1}) format('truetype');
}`;
This throws an error while importing
Uncaught Error: Cannot create styled-component for component: #font-f .ace{font-familty:'UberMove-Light';src:url(,) format('truetype');}.
You need to load the font-face globally and then use it in the components:
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
body {
#import url(${fontUrls1});
font-family: 'UberMove-Light';
}
`
const App = () => (
<div>
<GlobalStyles />
//...
</div>
)
In the create react app documentation it says the App.css is imported in the App.js. Is there also a way to load the compiled css-file from a component?
// MyViewComponent
import styles from '../../App.css';
You can just import the css file like the below in your component
import './header.css';
Imagine your header.css file looks like
.header {
background-color: rgb(49, 118, 197);
height:100px;
border:10px solid red;
}
To use the style, you can use the class like ,
<div className="header">Hello World</div>
Hope this helps :)
For css files you can just import them like
import "../../App.css"
which will import all of the selectors & CSS rules within that file.
if you're trying to style individual elements within your component with something like:
<div style={myStyles.wrapper} />
then you'll need to export a JS object from a file
Ex:
export default {
wrapper: {
background: "red"
}
}
then you can import it and use it
import myStyles from "../myStyles.js"
<div style={myStyles.wrapper} />
I want to apply background image for specific component.
I used react-router-dom and my code is below.
[App.js]
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from './components/Login';
import Home from './components/Home';
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path="/" component={Login} />
<Route path="/home" component={Home} />
</div>
</Router>
);
}
}
export default App;
[Login.js]
import React, { Component } from 'react';
import './Login.css';
class Login extends Component {
render() {
return (
<div>
Login
</div>
);
}
}
export default Login;
[Login.css]
html {
background-color: red;
}
[Home.js]
import React, { Component } from 'react';
import './Home.css';
class Home extends Component {
render() {
return (
<div>
Home
</div>
);
}
}
export default Home;
[Home.css]
html {
background-color: blue;
}
I set the background-color of Login to red and Home to blue.
But not only Login.js but also Home.js's background color is blue.
How can I set the different background color for each components?
Apply styles to class
Assign a class to the outermost div in Login.js
class Login extends Component {
render() {
return (
<div className="login">
Login
</div>
);
}
}
export default Login;
Now apply styles to the classes
.home{
background-color:blue;
}
.login{
background-color:red;
}
If u want to apply background image for full page try this css..
.home {
background: url("image.jpg");
background-size: cover;
background-repeat: no-repeat;
}
Change the css to:
body {
background-color: red !important;
}
The background color property is set to the body tag, not the html tag. The !important will ensure that this style is applied over any other conflicts you may have.
--Edit--
To apply background colors to the individual components, you should add a class to each of the parent div, and style that class directly like so:
Note: Heights have been added to the styles to ensure 100% vertical fill of the browser, as per the OP's request. It is not required otherwise.
Login.js
import React, { Component } from 'react';
import './Login.css';
class Login extends Component {
render() {
return (
<div className="scene_login">
Login
</div>
);
}
}
export default Login;
Login.css
body, html {
height: 100%;
}
.scene_login {
height: 100%;
background-color: red;
}
Home.js
import React, { Component } from 'react';
import './Home.css';
class Home extends Component {
render() {
return (
<div className="scene__home">
Home
</div>
);
}
}
export default Home;
Home.css
body, html {
height: 100%;
}
.scene__home {
height: 100%;
background-color: blue;
}