React Component is not being styled by .Css file - javascript

My title component is not getting styled by its css file.
I want it to have a green background.
It is coming up white for some reason.
Here is the Component Js file:
import React from "react";
function Title() {
return (
<div className="Title">
<h1>Welcome to ZXY Gallery</h1>
</div>
);
}
export default Title;
Here is the .Css file:
/* src/Title.css */
title {
box-sizing: border-box;
width: 50%;
display: flex;
justify-content: center;
padding: 1em;
margin-bottom: 2em;
background-color: green;
}
Here is the app.js file:
import React from "react";
// import Split from "react-split";
import SplitPane from "react-split-pane";
import "./App.css";
import Title from "./Title";
import "./Title.css";
function App() {
return (
<div>
<Title />
<SplitPane
split="vertical"
minSize={50}
defaultSize={parseInt(localStorage.getItem("splitPos"), 10)}
onChange={size => localStorage.setItem("splitPos", size)}
>
<div style={{ height: "75%", backgroundColor: "red", border: "5%" }}>
<h1>This Area is Highly Toggleable</h1>
</div>
<div style={{ height: "85%", backgroundColor: "yellow", border: "5%" }}>
<h1>
We love these
<a target="_blank" href="http://chillcastle.com/art">
<h1>Artists</h1>
</a>
They have shown with us in the past.
</h1>
</div>
</SplitPane>
</div>
);
}
export default App;
Does anyone see why I cant get the Title to have for example a green background?

Since you are trying to reference a class, you need to put ".Title" in your css instead of "title".

Related

Second component not rendering below first one - REACT JS

I am making a personal website. The landing page is the first component. The second page is the About component but it is not rendering below the landing component. It is appearing at the top.
App.js file:
import "./App.css";
import Landing from "./components/Landing/Landing";
import About from "./components/About/About";
function App() {
return (
<div className="App">
<Landing/>
<About/>
</div>
);
}
export default App;
**App.css file: **
.App{
display: flex;
flex-direction: column;
}
body{
overflow-x: hidden;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background: black;
border-radius: 1ex;
}
::-webkit-scrollbar-thumb{
background: #427898;
border-radius: 1ex;
}
::-webkit-scrollbar-corner {
background: black;
}
a{
text-decoration: none;
color: inherit
}
About.jsx file:
import React from 'react'
import css from "./About.module.css"
const About = () => {
return (
<div style={{ color: 'white' }}>About</div>
)
}
export default About
I have already tried creating a container class for About and then changing the display in my About.module.css file but the About text still remains at the top of the page unseen.This is the landing page and as you can see I want the About component to now be below the landing page as you scroll down.

I can't import emotion js style with dynamic variable

I have a webpage that looks like this:
This is my _app.tsx file:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { createTheme } from '#arwes/design'
import { ThemeProvider, Global, css } from '#emotion/react'
import { globalStyles } from '../shared/styles.js'
function MyApp({ Component, pageProps }: AppProps) {
const theme = createTheme();
return (
<ThemeProvider theme={theme}>
{globalStyles}
<div style={{
marginBottom: theme.space(2),
borderBottom: `${theme.outline(2)}px solid ${theme.palette['primary'].main}`,
padding: theme.space(2),
backgroundColor: theme.palette.neutral.elevate(2),
textShadow: `0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main}`,
color: theme.palette['primary'].main
}}>
Futuristic Sci-Fi UI Web Framework
</div>
<Component {...pageProps} />
</ThemeProvider>
)
}
export default MyApp
And this is shared/styles.js:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => css`
marginBottom: ${theme.space(2)};
borderBottom: ${theme.outline(2)}px solid ${theme.palette['primary'].main};
padding: ${theme.space(2)};
backgroundColor: ${theme.palette.neutral.elevate(2)};
textShadow: 0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main};
color: ${theme.palette['primary'].main};
`
Notice that blueOnBlack is an attempt to put the Futuristic Sci-Fi UI Web Framework style into its own importable variable.
The problem is that when I put blueOnBlack into the _app.tsx as the style for the Futuristic Sci-Fi UI Web Framework div tag, it fails.
This is _app.tsx with blueOnBlack imported:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { createTheme } from '#arwes/design'
import { ThemeProvider, Global, css } from '#emotion/react'
import { globalStyles, blueOnBlack } from '../shared/styles.js'
function MyApp({ Component, pageProps }: AppProps) {
const theme = createTheme();
return (
<ThemeProvider theme={theme}>
{globalStyles}
<div style={blueOnBlack(theme)}>
Futuristic Sci-Fi UI Web Framework
</div>
<Component {...pageProps} />
</ThemeProvider>
)
}
export default MyApp
The resulting webpage looks like this,
It's almost right... but it dropped the background color. Why is it different?
I changed shared/styles.js from:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => css`
marginBottom: ${theme.space(2)};
borderBottom: ${theme.outline(2)}px solid ${theme.palette['primary'].main};
padding: ${theme.space(2)};
backgroundColor: ${theme.palette.neutral.elevate(2)};
textShadow: 0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main};
color: ${theme.palette['primary'].main};
`
to this:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => styled.div={
marginBottom: theme.space(2),
borderBottom: theme.outline(2) + 'px solid' + theme.palette['primary'].main,
padding: theme.space(2),
backgroundColor: theme.palette.neutral.elevate(2),
textShadow: '0 0 ' + theme.shadowBlur(1) + 'px ' + theme.palette['primary'].main,
color: theme.palette['primary'].main
}
And then it ran and gave me the correct styling including the black background on the text. Notice that I'm using styled.div instead of css

Reset scrollbar state on switching content

I have a sample code with one button and 2 images that are shown conditionally. I need to scroll to the top of the content div, where images are shown but it stays in the same position as the previous content.
I tried to separate buttons and content between separate divs but it didn't help. Is there a way to achieve this with only CSS.
Here is the code and working example in codesandbox:
https://codesandbox.io/s/upbeat-sutherland-9r0kh?file=/src/styles.css:0-206
The page:
import { useState } from "react";
import "./styles.css";
export default function App() {
const [isOpen, setIsOpen] = useState(true);
return (
<div className="App">
<div className="buttonContainer">
<button onClick={() => setIsOpen(!isOpen)}>switch</button>
</div>
<div>
{isOpen ? (
<img src="https://images.unsplash.com/photo-1574285013029-29296a71930e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80" />
) : (
<img src="https://images.unsplash.com/photo-1558064340-601a5c6ac442?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
)}
</div>
</div>
);
}
CSS:
.App {
font-family: sans-serif;
text-align: center;
display: flex;
align-items: center;
}
.buttonContainer {
position: fixed;
height: 100vh;
}
button {
position: absolute;
height: 100px;
}

Styled Component v5.3 createGlobalStyles not Working

I'm trying to create Global Styles for my application using createGlobalStyles but somehow the components are not rendering and I am getting a console warning.
App.js
import GlobalStyles from "./styles/GlobalStyles";
function App() {
return (
<div className="App">
<GlobalStyles>
<h1>This is a test line</h1>
</GlobalStyles>
</div>
);
}
export default App;
GlobalStyles.js
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
html {
font-size: 8px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-weight: 200;
}
body {
font-size: 8px;
}
h1 {
font-size: 2rem;
}
`;
export default GlobalStyles;
Console Error[enter image description here][1]
GlobalStyle.js:28 The global style component sc-global-dtGiqY was given child JSX. createGlobalStyle does not render children.
Error Screenshot
https://i.stack.imgur.com/QJBLz.png
Place <GlobalStyles /> as a sibling to your other content—not as a parent element trying to accept children.
<div className="App">
<GlobalStyles />
<h1>This is a test line</h1>
</div>

Styled Component Custom CSS in ReactJS

I'm actually having trouble doing CSS with the styled component in React. Given below is the code snippet
import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
const Styles = styled.div`
.navbar {
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
}
.h1 {
color: white;
}
`;
const Footer = () => {
return (
<Styles>
<Navbar>
<Container>
<Row>
<Col sm={{ size: 4 }}>
<h1>Hi</h1>
</Col>
</Row>
</Container>
</Navbar>
</Styles>
);
};
export default Footer;
What I want to do is to change the color of the h1 tag to white but the above custom CSS is not working. I've tried background-color too, but still the issue persists.
With styled-components, you shouldn't use classes for styling elements. You should use separated wrappers for components, it's the main point. I think you wanted to do something like this:
import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
const StyledNavbar = styled(Navbar)`
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
`;
const Header = styled.h1`
color: white;
`;
const Footer = () => {
return (
<StyledNavbar>
<Container>
<Row>
<Col sm={{ size: 4 }}>
<Header>Hi</Header>
</Col>
</Row>
</Container>
</StyledNavbar>
);
};
export default Footer;
you used .h1 the class, not h1 the tag, in your css.
https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

Categories