Develop Reference

I'm building three pages using react, each of them has its own css file and only one css file is working for everyone of them

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

Why is my styled component not rendering as specified using GatsbyJS?

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

Pass in a stylesheet as a prop for a render in a functional component

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> )

How to style a nested component from its parent component in Vuejs?

I am going to create a layout like 'header sidebar main-content sidebar footer ' with flexbox by Vuejs.
I created separate .vue files for each part of the layout , I mean something like a sidebar.vue and a header.vue and so on ....
And I am going use them in App.vue file like :
<template>
<div id="app">
<app-header ></app-header>
<app-sidebar></app-sidebar>
<app-content></app-content>
<app-sidebar></app-sidebar>
<app-footer></app-footer>
</div>
</template>
<script>
import header from "./components/header";
import sidebar from "./components/sidebar";
import content from "./components/content";
import footer from "./components/footer";
export default {
components: {
"app-header": header,
"app-sidebar": sidebar,
"app-content": content,
"app-footer": footer
}
};
</script>
<style lang="scss">
body {
margin: 0;
padding: 0;
}
#app {
border: 3px solid red;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
> * {
border: 1px solid black;
}
}
the main problem is I can not select these custom nested components from App.vue file to style them. for example i can not use app-header{} like other normal tags in html and css to select it and style it within style tags inside of App.vue file . is there anyway to solve it ?
NOTE : I know I can assign a class to each of these nested components and then select them to use with css class selector .

I would handle this by creating a property in each of the child components (maybe HeaderClass, BodyClass, and so on). That way, any component that consumes these child components can pass whatever classes they desire and style them accordingly.
<app-header :headerclass="parent-header-class"> </app-header>
Inside of your child component, you can use these properties and v-bind the class inside the HTML, as shown in the example below:
<template>
<div :class=`${headerClass} internal-class-example button`> </div>
</template>
Note: This does not allow you to use any scoped parent CSS to pass to the child. The classes you pass down must be global. Otherwise, the child component will not know what it is.

Style does not get added after Importing css into React component

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">