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
Related
This is my Stylesheet.js:
import React from 'react'
import "./mystyle.css "
function Stylesheet() {
return (
<div>
<h1 className="primary">Dhoni</h1>
</div>
)
}
export default Stylesheet
This is my App.js:
import './App.css';
// import Myroutes from "./Myroutes.js";
import Stylesheet from './Stylesheet';
function App() {
return (
<>
<Stylesheet primary={false} />
</>
);
}
export default App;
This is mystyle.css:
.primary {
color: orange;
}
.font-xl {
font-size: 52px;
}
I've not used Myroutes.js in this case. I'm not getting any errors in console or otherwise.
Expected Output:
No css should be applied to the text called "Dhoni". i.e a black text.
Try this and see if it works:
This is my Stylesheet.js:
import React from 'react'
import "./mystyle.css "
function Stylesheet({primary}) {
return (
<div>
<h1 className={primary}>Dhoni</h1>
</div>
)}
export default Stylesheet;
This is my App.js:
import './App.css';
// import Myroutes from "./Myroutes.js";
import Stylesheet from './Stylesheet';
function App() {
return (
<>
<Stylesheet primary={false} />
</>
)};
export default App;
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 new to react and im trying to add render a list of items from an external SidebarData.js file (in the same root /components/..)
i'm not sure why my map function is not returning anything.
i get a list of elements thats correct, but the item.title and item.path seem not to render...
I feel there's a problem with the props.
I tried to write just
render(){
<h1>{SubmenuData[1].title}</h1>
}
and it works fine, but when i try to map on the full array, it doesn't seem to render anything. it renders the correct number of elements, but the title and path are not returning...
Here's my two components : Sidebar (Main one)
import React from 'react'
import styled from 'styled-components'
import { SidebarData } from './SidebarData'
import Submenu from './Submenu'
const Nav = styled.div`
background: #f5f5f5;
color: #7d7d7d;
display:flex;
justify-content:flex-start;
height:100%;
width:15%;
`
const Sidebar = () => {
return (
<>
<Nav>
{SidebarData.map((item, index)=>{
return <Submenu item={item} key={item.index} />
})}
</Nav>
</>
)
}
export default Sidebar (Where i think there's a problem)
and Submenu
import React, { Component } from 'react'
import styled from 'styled-components'
import { Link } from "react-router-dom"
const SidebarLink = styled(Link)`
display: flex;
color: #404040;
`
const SidebarLabel = styled.span`
color:#000;
`
const Submenu = (item)=>{
return (
<SidebarLink to={item.path} >
<SidebarLabel>{item.title}</SidebarLabel>
</SidebarLink>
)
}
export default Submenu
Your style of receiving props is mistake i guess. Destructure the props like:
const Submenu = ({item})=>{
return (
<SidebarLink to={item.path} >
<SidebarLabel>{item.title}</SidebarLabel>
</SidebarLink>
)
}
export default Submenu
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.
this is my component code
import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';
const layout = (props) => (
<Aux>
<div>toolbar, sideshow, backdrop</div>
<main className = {classes.Content}>
{props.children}
</main>
</Aux>
);
export default layout;
in this {props.children} just the <p> Hi </p> and this is my css file
.Content{
margin: 2% auto;
}
thi
why the style of the classes.Content not working?