I am currently trying to get myself familiar with the basics of React having previously employed a web development workflow using conventional HTML/CSS/JS. I am using GatsbyJS in conjunction with styled components and encountering the following problem.
I am defining and exporting a styled component named Header as follows:
import React from "react"
import styled from "styled-components"
// header.js
const HeaderWrapper = styled.div`
margin: 3rem auto;
background: black;
padding: 16px;
`
const SiteTitle = styled.h1`
font-size: 32px;
color: white;
`
const Header = props => (
<HeaderWrapper>
<SiteTitle>
{props.siteTitle}
</SiteTitle>
</HeaderWrapper>
)
export default Header
I am then using the exported Header component in my index.js as follows:
import React from "react"
import Header from "../components/header"
// index.js
export default () => (
<Header siteTitle="This is my Site" />
)
However, when viewing my site the text "This is my Site" is being rendered without any of the styles specified in my header.js file. I can’t seem to figure out what I’m doing wrong so any help would be much appreciated.
Thanks very much in advance.
Edit: I added a screenshot of the rendered site (including Chrome Developer tab) below.
https://ibb.co/3FCq751
Related
I'm working on these three pages:
App.js has two buttons, when you click on the first button it takes you to page "/quotes", and when you click on the second button it takes you to page "/recommendations". The htmls of all three are working BUT whenever i go to "/quotes" or "/recommendations" the App.js html content AND css content continues to appear (in a very weird and broken way, it looks very bad).
Heres an example:
this is my code:
App.js:
import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import QuotePage from './QuotePage.js'
import RecommendationPage from './RecommendationPage.js'
function App() {
return (
<div className="all-page">
<Router>
<Routes>
<Route path="/quotes" element={<QuotePage/>}/>
<Route path="/recommendations" element={<RecommendationPage/>}/>
</Routes>
</Router>
<main className="central-div">
<h2>Taylor's Songs</h2>
<a href="/quotes" className="quote-bttn">
FIND ME A QUOTE
</a>
<a href="/recommendations" className="recommend-bttn">
GET ME A RECOMMENDATION
</a>
</main>
</div>
);
}
export default App;
QuotePage.js:
import './QuotePage.css';
function QuotePage() {
return (
<h1>testing</h1>
);
}
export default QuotePage;
QuotePage.css (I only made this for testing):
body{
background-color: red;
}
RecommendationPage.js:
import './RecommendationPage.css';
function RecommendationPage() {
return (
<div className="test">
<h1>this should be the recommendation page!</h1>
</div>
);
}
export default RecommendationPage;
RecommendationPage.css:
*{
background: rgba(191, 240, 243, 0.94);
}
.test{
background-color: rgb(234, 83, 83);
height: 30px;
}
If there's anything missing here, I'm sorry and would really appreciate if you took a quick look to check if it's here: https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master/front
Thank you SO much for anyone who tries to help me!!! <3
I think you're falling for a trap commonly experienced with new people to react: it's not structured like HTML.
While this isn't strictly true, it's helpful to start off as thinking that react has only one screen/page: app.js. You pull other content into this page using components. This is called managing state.
Because you have all of that code in app.js, it will continue to appear. What you need to do is create a separate file (say, "home.js") and put that code in there.
You then need to do the routing with a tool like react-router-dom so that you can change the content on the screen.
Once you've done that, you'll have begin to see how react works.
So:
Move all of that content into a new file called home.js
install react-router-dom with npm
create a new file called navbar.js and create a navigation bar for your site with it
when done, only call navbar.js as a component in app.js
add your pages as routes
You'll need to read up on react-router-dom but it's pretty straightforward
This question already has answers here:
Why is css imported into the global scope in React?
(2 answers)
Closed 1 year ago.
Note:
No need to understand my code, just focus on the 3 components files Palette.js, Palette.css and footer.js
Firstly I created my footer component in Palette.js and write CSS for its styling in Palette.css, which is linked to only Palette.js. in order to use the footer in different files, I created a new footer component in a separate file[footer.js] but forget to import styles from Palette.css which are used to style my footer, I removed my whole footer component from Palette.js and import my footer component from footer.js in Palette.js
My footer component looks like [footer.js without any stylesheet]
import React, { Component } from 'react'
function Footer(props){
const { creater, emoji, paletteName} = props;
return (
<footer>
<h2 className="palette-creater">Palette Created by : {creater}</h2>
<div className="palette-identity">
<span className="palette-emoji">
{emoji}
</span>
<span className="palette-name">
{paletteName}
</span>
</div>
<h3 className="palette-copyright">All rights reserved # Colors.io 2021</h3>
</footer>
)
}
export default Footer;
My Palette.js looks like
import React, { Component } from 'react'
import ColorBox from './ColorBox';
import NavBar from './NavBar';
import Footer from './footer' ;// imported my footer
import './Palette.css';
//styles for footer component in footer.js are still in this file
export default class Palette extends Component{
render(){
return (
<Footer creater={creater} emoji={emoji} paletteName={paletteName} />
)
}
}
As you can see my footer.js has no styles and my Palette.js has a CSS file palette.css which has styles for my footer. Also, the styles for my footer in the Palette.css looks like
footer{
background-color: #ced0d1;
font-family: 'Red Hat Display', sans-serif;
padding: 5px;
text-align: center
}
.palette-creater{
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
font-weight: 500;
letter-spacing: 3px;
}
.palette-identity{
display: flex;
justify-content: space-around;
}
.palette-name{
font-size: 1.1rem;
font-weight: 400;
}
.palette-emoji{
display: block;
font-size: 1rem;
}
.palette-copyright{
margin:0;
padding-bottom: 5px;
}
How my styles are applying to the footer component from Palette.css, which is not even linked with the footer.js, and also no matter wherever I import my footer component from footer.js and used it, it's always applying styles from Palette.css. My application is pretty large, I cannot post all the code.
Example
just think of that I make a new file app.css and linked it with only App.js and writes all the styles of the application in app.css, then all the components take styles from here.
I believe you'll be able to find your answer here: React CSS - how to apply CSS to specific pages only
The key element from the above link is that "Create React App bundles all your css files into one so all the styles will be available everywhere in you app (on every rendered component). Be aware that CRA is a Single-Page Application (SPA) so you can't think in "pages" but rather in "rendered component" in the DOM."
I recently started using Gatsby for building my websites, previously I relied just on plain html and css, so I may be missing something really basic here...
I am trying to style a custom header component that looks like this
import React from "react"
import MWidth from "./m-width"
import logo from "../resources/images/logo.png"
function Header() {
return (
<>
<MWidth>
<div>
<img src={`${logo}`}></img>
</div>
</MWidth>
</>
)
}
export default Header
after importing it inside the layout component I tried styling it with styled-components like so
const PageHeader = styled(Header)`
background-color: #f0f;
`
but nothing changed.
I saw this approach being used with the Link component, but maybe it's defined in another way. Am I missing something or is it just a Gatsby error?
My Layout.js file looks like this
import React from "react"
import styled from "styled-components"
import Header from "./header"
import Content from "./content"
import Footer from "./footer"
import "./common.css"
const PageHeader = styled(Header)`
background-color: #f0f;
`
function Layout(props) {
return (
<>
<PageHeader />
<Content>{props.children}</Content>
<Footer />
</>
)
}
export default Layout
Let me know if you need more information. Any help would be appreciated.
Thanks 😉
Edit:
Turns out that in order for this to work you have to attach a class name to the element you want to style passing it as a prop.So as ksav suggested I added props into the Header function declaration and className={props.className} to a wrapper div. Now it looks like this
function Header(props) {
return (
<div className={props.className}>
<MWidth>
<div>
<img src={`${logo}`}></img>
</div>
</MWidth>
</div>
)
}
which essentially is the same thing as the one he posted below. And this solved the problem.
Thank you 😄
Styling any component
The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.
function Header({className}) {
return (
<div className={className}>
<MWidth>
<div>
<img src={`${logo}`}></img>
</div>
</MWidth>
</div>
)
}
I'm using Next.js, React, Styled JSX, and Postcss if that matters. I need to style an imported component for a specific page. Since the stylesheets are created for a specific component at the time of render, I figured I could just put the custom styles for the component in with the page specific resources and pass them in. But I'm getting the following error:
Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{`some css`}</style>), but got MemberExpression
I have two functional renders in two separate directories and files, one a page and the other a component:
src/pages/mypage/
index.js
styles.css
myComponentStyles.css
src/components/MyComponent
index.js
styles.css
Keeping in mind that file/directory referencing is not mirrored from my environment because it's not the problem, here's my code:
src/pages/mypage/index.js
import MyComponent from '../../components/MyComponent'
import styles from './styles.css'
import MyComponentStyles from './myComponentSyles'
const MyPage = () => {
return (
<div className="my-page-container">
<style jsx>{styles}</style>
<MyComponent styles={MyComponentStyles} />
</div>
)
}
export default MyPage
src/components/MyComponent/index.js
import styles from './styles.css'
const myComponent = props => {
return (
<>
<style jsx>{styles}</style>
<style jsx>{props.styles}</style>
<div className="my-component-main-container">MyComponent</div>
</>
)
}
export default MyComponent
How would I allow MyComponent to receive a stylesheet generated by another component?
Although this is not a direct solution to the problem, Styled JSX has a :global() pseudo selector that accomplishes the end goal of styling a component that is outside the scope of the current component. A working example for the given code is:
src/pages/mypage/styles.css
.my-page-container :global(.my-component-main-container){
color: white;
}
Here is what the Next.js documentation says for the :global() pseudo selector:
One-off global selectors
Sometimes it's useful to skip selectors scoping. In order to get a
one-off global selector we support :global(), inspired by css-modules.
This is very useful in order to, for example, generate a global class
that you can pass to 3rd-party components. For example, to style
react-select which supports passing a custom class via
optionClassName:
import Select from 'react-select'
export default () => (
<div>
<Select optionClassName="react-select" />
<style jsx>{`
/* "div" will be prefixed, but ".react-select" won't */
div :global(.react-select) {
color: red
}
`}</style>
</div> )
I have this class in a CSS file (TextBoxStyle.css) -
.CustomTextBox{
width: 100%;
border-radius: 4px;
height: 30px;
}
Then I am trying to use this in a React component -
import React from 'react';
import ReactDOM from 'react-dom';
import styleClass from './TextBoxStyle.css';
export class TextBox extends React.Component{
render(){
return (
<input className={styleClass.CustomTextBox}>
</input>
);
}
}
My project gets build successfully as I have installed all necessary loaders through webpack.
However, the class 'CustomTextBox' does not show up in my final html page.
Please let me know if I need to elaborate on any point.
Highly appreciate any help.
If you don't absolutely need to reference CustomTextBox, you could try importing the CSS directly like so:
import './TextBoxStyle.css';
Then change the className on the input like so:
<input className="CustomTextBox">