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'
Related
I just added a swiper to my React project, and I need the pagination background to be transparent. The modifications I make on the CSS file don't seem to have any effect on the page itself.
So the first part is my JSX file, and the second is my CSS file. Both are linked correctly, I tried modifying the minified file but the problem remains the same.
import React, { useEffect, useState } from 'react';
import Game from '../Game';
import axios from 'axios';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper';
import 'swiper/swiper-bundle.css';
import { Keyboard, Pagination, A11y } from 'swiper';
const GamesList = (props) => {
const { searchValue, setGameId, gameId, platform, genre } = props;
const [data, setData] = useState([]);
useEffect(() => {
const timeout = setTimeout(() => {
axios
.get(
`https://api.rawg.io/api/games?key=453247c1c78a4a88aa6594a59227801b&genres=${genre}&platforms=${platform}&search=${searchValue}`
)
.then((res) => {
setData(res.data.results);
});
}, 700);
return () => clearTimeout(timeout);
}, [searchValue, platform, genre]);
return (
<div id='list'>
{/* <p>{platformName}</p> */}
<Swiper
modules={[Navigation, A11y, Keyboard, Pagination]}
pagination
navigation
a11y
keyboard
effect
speed={800}
slidesPerView={3}
loop
className='my-swiper'
>
{data
.filter((gameChoice) => gameChoice.name.toLowerCase())
.map((game, index) => (
<SwiperSlide>
<Game/>
</SwiperSlide>
))}
</Swiper>
</div>
);
};
export default GamesList;
I tried adding the "background: none" line but nothing happened...
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
background: none;
}
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?
I am trying to build this simple component which takes title and Icon Component as props and renders them. The icons I use here are third party components like the ones from Material UI.
option.component.jsx
import { Wrapper } from './option.styles';
function Option({ title, Icon }) {
return (
<Wrapper>
{Icon && <Icon />}
<h4>{title}</h4>
</Wrapper>
);
}
option.styles.js
import styled from 'styled-components';
export const Wrapper = styled.div`
display: flex;
color: grey;
&:hover {
color: white;
}
`;
// export const Icon =
I've organized all my styles in a separate file and I intend to keep it that way.
I want to style <Icon /> , but I don't want to do it inside Option Component like this.
import styled from 'styled-components';
import { Wrapper } from './option.styles';
function Option({ title, Icon }) {
const IconStyled = styled(Icon)`
margin-right: 10px;
`;
return (
<Wrapper>
{Icon && <IconStyled />}
<h4>{title}</h4>
</Wrapper>
);
}
What is the best way to style a component passed as a prop while maintaining this file organization?
I've looked through the documentation and I wasn't able find anything related to this. Any help would be appreciated.
You can do this in 2 ways:
1. As a SVG Icon (svg-icon):
option.styles.js as:
import styled from "styled-components";
import SvgIcon from "#material-ui/core/SvgIcon";
export const Wrapper = styled.div`
display: flex;
color: grey;
&:hover {
color: black;
}
`;
export const IconStyled = styled(SvgIcon)`
margin-right: 10px;
`;
And in your component, do like that:
import { Wrapper, IconStyled } from "./option.styles";
function Option({ title, Icon }) {
return (
<Wrapper>
{Icon && <IconStyled component={Icon} />}
<h4>{title}</h4>
</Wrapper>
);
}
const App = () => {
return (
<>
<Option title="title" Icon={HomeIcon}></Option>
<Option title="title" Icon={AccessAlarmIcon}></Option>
</>
);
};
2. As a Font Icon (font-icons):
Import material icons in <head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
option.styles.js as:
import styled from "styled-components";
import Icon from "#material-ui/core/Icon";
export const Wrapper = styled.div`
display: flex;
color: grey;
&:hover {
color: black;
}
`;
export const IconStyled = styled(Icon)`
margin-right: 10px;
`;
And in your component, do like that:
import { Wrapper, IconStyled } from "./option.styles";
function Option({ title, icon }) {
return (
<Wrapper>
{icon && <IconStyled>{icon}</IconStyled>}
<h4>{title}</h4>
</Wrapper>
);
}
const App = () => {
return (
<>
<Option title="title" icon='star'></Option>
<Option title="title" icon='home'></Option>
</>
);
};
import React from 'react';
import {
List, ListItem,
} from '#material-ui/core';
import {
makeStyles, createStyles,
} from '#material-ui/core/styles';
import clsx from 'clsx';
import VideoCard from './VideoCard';
const useStyles = makeStyles(() => createStyles({
root: {
display: 'inline-flex',
},
item: {
padding: '80px 40px',
},
}));
export default function VideoList(props: any) {
const { videos } = props;
const classes = useStyles();
return (
<div>
<List className={clsx(classes.root)}>
{videos.map((video: any) => (
<ListItem className={classes.item} button key={video}>
<VideoCard videoTitle={video.title} thumbnailImage={video.imageSrc} key={video} />
</ListItem>
))}
</List>
</div>
);
}
import React from 'react';
import Typography from '#material-ui/core/Typography';
import clsx from 'clsx';
import Thumbnail from './Thumbnail';
export default function VideoCard(props: any) {
const { thumbnailImage, videoTitle } = props;
return (
<div>
<Thumbnail imageSrc={thumbnailImage} />
<Typography>{videoTitle}</Typography>
</div>
);
}
I am trying to display a series of video titles and thumbnails (like how video cards are displayed on the frontpage of youtube). How do I get the cards to go to a new line say every 4 cards? Currently, they line up and go off screen.
Edit: added my VideoCard code aswell
Make it float: 'left' and then set 100% - 25% to make a new line every 4 cards
const useStyles = makeStyles(() =>
createStyles({
root: {
width: "100%",
display: "inline-block"
},
item: {
padding: "80px 40px",
float: 'left',
width: '25%'
}
})
);
I need some help. I am trying to style a screen header with an image in the background. But the background graphic is not styling properly, I have tried using both, Image and ImageBackground. The image should fit the width and should be in the background.
this is how it should look:
this is how it looks now:
when I set the width to 100% or to the width of the window this is what I get, The image gets cropped from the bottom:
Here is my code:
ArtistProfile.tsx
import React, { Component } from "react";
import { Content } from "native-base";
import styled from "styled-components/native";
import ScreenLayout from "../layout/ScreenLayout";
interface ArtistProfileProps {
componentId: string;
}
class ArtistProfile extends Component<ArtistProfileProps> {
render() {
return (
<ScreenLayout componentId={this.props.componentId}>
<ArtistProfileContent>
<HeaderBackground
source={require("../../assets/img/header-bg.png")}
/>
</ArtistProfileContent>
</ScreenLayout>
);
}
}
export default ArtistProfile;
const ArtistProfileContent = styled(Content)`
flex: 1;
`;
const HeaderBackground = styled.Image`
flex: 1;
align-self: center;
margin: 0;
padding: 0;
`;
ScreenLayout.tsx
import React, { Component } from "react";
import theme from "../../theme/Theme";
import styled, { ThemeProvider } from "styled-components/native";
import { Container } from "native-base";
import FooterNavigation from "../../components/footer/Footer";
interface ScreenLayoutProps {
componentId: string;
}
class ScreenLayout extends Component<ScreenLayoutProps> {
render() {
return (
<ThemeProvider theme={theme}>
<ScreenLayoutContainer>{this.props.children}</ScreenLayoutContainer>
<FooterNavigation componentId={this.props.componentId} />
</ThemeProvider>
);
}
}
export default ScreenLayout;
const ScreenLayoutContainer = styled(Container)`
flex: 1;
`;
Maybe you can set width like this
import {Dimensions} from 'react-native';
const windowWidth = Dimensions.get('window').width;
react native dimensions
You can set the width to '100%' in HeaderBackground component.