I have added the following classes to elements as follows:
import Link from "next/link";
import React from "react";
const Page = () => {
return (
<div>
<h1 className="notes-header">Index Page</h1>
<Link href="./notes">
<a className="notes-home">Notes</a>
</Link>
</div>
);
};
export default Page;
Next, I added styling to my element as follows
.notes-header {
font-size: 100px;
}
.notes-home {
font-size: 28px;
}
Lastly, I created a _app.js file and imported the global css file as shown below:
import React from "react";
import "../styles/globals.css";
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
The problem is my styles don't get applied to my selected elements. What I'm I getting wrong?
Related
I am trying to use #emotion/styled. But, I cannot get the components to render on the screen, whereas if I am using the HTML element it is working fine.
import styled from "#emotion/styled";
export const Button = styled.button`
color: red;
background-color: green;
`;
import { Button } from "../styles/Button";
const Test = () => {
return (
<div>
<Button>Hello</Button>
</div>
);
};
export default Test;
Does anyone has any idea where things are going wrong?
It is working in my sandbox here
sandbox
import "./styles.css";
import styled from "#emotion/styled";
const Button = styled.button`
color: red;
background-color: green;
`;
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button>Hello</Button>
</div>
);
}
try to import this on top of your component where you use emotion css.
This fixed my problems with not loading emotion css. Cheers!
/** #jsxImportSource #emotion/react */
You can use styled with css function to make a new component by updating some styles of existing component.
import styled from "#emotion/styled";
import { css } from "#emotion/react";
import { Button as MUIButton } from "#mui/material";
export const Button = styled(MUIButton)(
css({
backgroundColor: "green",
color: "red",
})
);
I am currently working on a simple react image that will have profile pictures of different user. I have run into an issue when I try to set the background image. I will have two background images but I am unable to place any.
The images are in my public/images/ but nothing is showing up in the webpage.
I am adding the image in body{} in the CSS file "App.css".
App.css
body {
margin: 0;
font-family: var(--fontFamily);
font-size: var(--fontSize);
background-image: "url(/images/bg-pattern-top.svg)";
background-size: contain;
background-position: top;
}
App.js
import './App.css';
import PorfileCard from './PorfileCard';
function App() {
return (
<div>
<PorfileCard/>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
The only way I was able to resolve this was via using inline styling on the main div in app.js.
import './App.css';
import PorfileCard from './PorfileCard';
function App() {
const mystyle = {
backgroundImage: "url(/images/bg-pattern-top.svg)",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}
return (
<div style={ mystyle }>
<PorfileCard/>
</div>
);
}
export default App;
I'm new to Next JS and can't figure out why my background color is not being received and used by my ThemeProvider.
I feel I've copied the tutorials correctly so I must be close right?
My error is TypeError: Cannot read property 'background' of undefined
globals.js
import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle`
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
background: {({ theme }) => props.theme.background};
}
_app.js
import { GlobalStyles } from '../styles/globals';
//Theming
import { ThemeProvider } from "theme-ui";
import { lightTheme } from '../styles/themes/theme';
function App({ Component, pageProps }) {
return (
<Provider session={pageProps.session}>
<ThemeProvider theme={lightTheme}>
<GlobalStyles />
<Component {...pageProps} />
</ThemeProvider>
</Provider>
)
}
export default App
theme.js
export const lightTheme = {
background: 'red'
}
I was stupidly using import { ThemeProvider } from 'theme-ui' instead of import { ThemeProvider } from 'styled-components'
In my react component, I have imported CSS file from the CSS directory, but the CSS isn't being applied to the component.
This is my folder structure
This is my code on the homepage.jsx file
import React from 'react';
import './homepage-styles.scss';
class HomePage extends React.Component {
render() {
return (
<div className="homepage-container">
<h1>Hello World</h1>
</div>
)
}
}
export default HomePage;
And this is the CSS file
.homepage-container {
background: red;
height: 100vh;
}
When I put the same CSS in the index.css file which is automatically created by the create-react-app, then the styling is visible.
What is the problem here? Am I missing something?
As far as I know you have to import styles to specific files in this way:
import React from 'react';
import styles from './homepage-styles.scss';
class HomePage extends React.Component {
render() {
return (
<div className={`${styles[homepage-container]}`}>
<h1>Hello World</h1>
</div>
)
}
}
export default HomePage;
Notice that the [] brackets are only for multi-word scss classes. If your class would be just named homepage, then the proper way would be className={`${styles.homepage}`}
I don't see any problem in your code whatever you have posted.
for your reference
JSX
import React from "react";
import "./homepage-styles.scss";
export default function App() {
return (
<div className="homepage-container">
<h1>Hello World</h1>
</div>
);
}
sass
.homepage-container {
background: red;
height: 100vh;
}
Live Demo
Make sure you have installed node-sass package.
This is the css file named Layout.css :
.Content {
margin-top: 16px;
color : red;
}
and this is the component named Layout.js :
import React from 'react';
import classes from './Layout.css';
// const Fragment = React.Fragment;
const { Fragment } = React;
const Layout = (props) => {
return (
<Fragment>
<div> toolbar , sidedrawer , backdrop </div>
<main className={classes.Content}>{props.children}</main>
</Fragment>
);
};
export default Layout;
and the problem is the css doesnt apply to component, i have this problem in my several components.
You have to import your css file like this :
import './Layout.css';
and then use the class like this :
<main className="Content">{props.children}</main>